html5实现在应用中打开的方法有哪些

　　介绍

这篇文章将为大家详细讲解有关html5实现在应用中打开的方法有哪些,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。

<强> 1。需求

前段时间开发项目,遇到了一个需求,简单来说,就是我们H5的页面有一个“在应用中打开”的按钮,用户点击后,如果用户已经安装应用,则直接打开应用程序,如果用户没有安装应用,那就跳转到下载应用的页面

首先,在我的认知中,H5应该是没有能力检测到某一款应用是否有安装的(如果有小伙伴知道如何检测,欢迎评论区告诉我,感谢!),所以我们需要一些技巧来完成判断应用是否安装这一过程。

之后的步骤以安卓手机为例子介绍,目前ios9版本之后的系统不需要我们H5做这些判断应用是否安装的流程(ios9之后可以通过提供一个通用链接(通用链接),做到没有安装应用提示打开苹果应用商城,安装了程序则直接跳转打开)

<强> 2。关于计划协议

计划协议是一种页面内跳转协议,我们可以通过定制方案协议,跳转到应用程序中的想要跳转的各个页面.scheme协议是通过url的形式进行跳转的,所以我们H5也可以通过这个网址去跳转到应用程序内指定页面,这就是H5打开应用程序的原理。

方案的url格式类似:<代码>[计划]://(主机)/(路径)?[查询]

<强> 3。H5实现在应用中打开的两种方法

<强> 3.1单纯使用定时器判断

这种的方法的思路是,首先把我们要跳转的地址设置为与原生应用同学一起定义好的方案的url,之后,设置一个定时器,定时器里执行的逻辑是跳转到下载应用程序页面,这样,如果用户手机没有安装应用程序,就会在一段时间后跳转到下载页面。

核心代码如下:(可以使用iframe完成跳转,但需要考虑iframe是否在ios等设备中被允许)

const  schemeUrl =, & # 39; xxx # 39; 　　const  downloadUrl =, & # 39; xxx # 39; 　　const  wait =500 　　try  { 　　,,,的位置=schemeUrl 　　,,,setTimeout((),=祝辞,{ 　　,,,,,,,的位置=downloadUrl 　　,,,},,等) 　　},catch  (e), { 　　,,,console.error (e) 　　}

<>强存在的问题

上述实现方案的问题是,即使成功跳转到应用,原先的H5页面也会在定时时间后,跳转到下载页面,这样体验很不好

<强> 3.2使用窗口的隐藏属性判断

这个方法的思路是,如果成功唤起了应用,我们的H5页面被置于后台,窗口。隐藏属性会变为真,可以通过这个属性变化来判断程序有没有打开,没打开就跳转到下载页面,当然这里也用到定时器

核心代码如下:

function  checkOutApp (), { 　　,,,const  schemeUrl =, & # 39; xxx # 39; 　　,,,const  downloadUrl =, & # 39; xxx # 39; 　　,,,const  wait =1000 　　,,,//,是否进入后台 　　,,,const  hidden =false 　　,,,的位置=schemeUrl 　　,,,//,如果一定时间内,页面没有隐藏,则跳转到下载页 　　,,,setTimeout((),=祝辞,{ 　　,,,,,,,if 隐藏(!),{ 　　,,,,,,,,,,,的位置=downloadUrl 　　,,,,,,,} 　　,,,},,等) 　　,,,//,页面可见性变化事件 　　,,,document.addEventListener (“visibilitychange",,函数(){ 　　,,,,,,,if  (document.hidden), { 　　,,,,,,,,,,,hidden =,真的 　　,,,,,,,} 　　,,,}); 　　}

<>强存在的问题

目前一些安卓浏览器,在应用程序存在时,会首先跳出一个确认框,询问用户是否打开应用程序,只有用户同意时,才会跳转应用,如果用户始终没有点击确认,最后还是会跳到下载页面、体验不好

<强> 4。一些思考

鉴于上面说到的一些问题,个人觉得可以在交互中增加一个“去下载页面”的交互,如果用户没有安装应用,一定时间后,首先提示用户”是否没有安装应用程序,点击去下载”类似的按钮,用户点击跳转到下载页面,这样会不会更好呢。

关于“html5实现在应用中打开的方法有哪些”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看的到。

html5实现在应用中打开的方法有哪些