浅谈Html5页面打开app的一些思考Html5跳转到APP指定页面的实现Html5与App的通讯方式详解Html5内唤醒百度、高德APP的实现示例html5唤醒APP小记Html5如何唤起百度地图App的方法html5调用app分享功能示例（WebViewJavascriptBridge）浅谈html5与APP混合开发遇到的问题总结Html5 APP中监听返回事件处理的方法示例使用html5新特性轻松监听任何App自带返回键的示例html5唤起app的方法

1. 需求

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

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

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

2. 关于scheme协议

scheme协议是一种页面内跳转协议，我们可以通过定制scheme协议，跳转到app中的想要跳转的各个页面。scheme协议是通过url的形式进行跳转的，所以我们H5也可以通过这个url去跳转到app内指定页面，这就是H5打开app的原理。

scheme的url格式类似： [scheme]://[host]/[path]?[query]

3. H5实现在App中打开的两种方法

3.1 单纯使用定时器判断

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

核心代码如下：（可以使用iframe完成跳转，但需要考虑iframe是否在ios等设备中被允许）

 const schemeUrl = 'xxx' const downloadUrl = 'XXX' const wait = 500 try { location = schemeUrl setTimeout(() => { location = downloadUrl }, wait) } catch (e) { console.error(e) }

存在的问题

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

3.2 使用window的hidden属性判断

这个方法的思路是，如果成功唤起了app，我们的H5页面被置于后台，window.hidden属性会变为true,可以通过这个属性变化来判断app有没有打开，没打开就跳转到下载页面，当然这里也用到定时器

核心代码如下：

 function checkOutApp() { const schemeUrl = 'xxx' const downloadUrl = 'XXX' const wait = 1000 // 是否进入后台 const hidden = false location = schemeUrl // 如果一定时间内，页面没有隐藏，则跳转到下载页 setTimeout(() => { if (!hidden) { location = downloadUrl } }, wait) // 页面可见性变化事件 document.addEventListener("visibilitychange", function(){ if (document.hidden) { hidden = true } }); }

存在的问题

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

4. 一些思考

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

到此这篇关于浅谈Html5页面打开app的一些思考的文章就介绍到这了,更多相关Html5打开app内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！