html 打开app,网页打开app几种方法
1. 需求
前段时间开发项目遇到一个需求。简单地说，我们的H5页面有一个“在应用程序中打开”按钮。用户点击后，如果用户已经安装了app，会直接打开app。如果用户没有安装应用程序，它将跳转到应用程序下载的页面。
首先，在我的认知里，H5应该是没有能力检测某个app是否安装的(如果有朋友知道怎么检测，请在评论区告诉我，谢谢！)，所以我们需要一些技巧来完成判断app是否安装的过程。
下面以安卓手机为例介绍步骤。目前ios9版本以后的系统不需要H5做这些判断app是否安装的过程(ios9以后可以提供通用链接，不安装app提示打开苹果App Store，安装App直接跳转打开)
2. 关于scheme协议
Scheme协议是一种页内跳转协议。我们可以通过自定义方案协议跳转到app中的各个页面。Scheme协议以url的形式跳转，所以我们H5也可以通过这个url跳转到app中的指定页面，这就是H5打开app的方式。
scheme的url格式类似于：[scheme]://[host]/[path]？[查询]
3. H5实现在App中打开的两种方法
3.1 单纯使用定时器判断
这个方法的思路是：首先把我们要跳转的地址设置为和我们原生App同学定义的scheme的url。然后，设置一个计时器。定时器中执行的逻辑是跳转到下载app页面。这样，如果用户手机没有安装app，过一会儿就会跳转到下载页面。
核心代码如下：(可以使用iframe完成跳转，但是需要考虑ios等设备是否允许使用iframe)
const scheme URL= XXX const download URL= XXX const wait=500 try { location=scheme URL setTimeout(()={ location=download URL }，wait)} catch(e){ console . error(e)}存在的问题
上述实现方案的问题在于，即使成功跳转到App，固定时间后原H5页面也会跳转到下载页面，体验非常不好。
3.2 使用window的hidden属性判断
这个方法的思想是，如果app被成功唤醒，我们的H5页面就会被放在后台，window.hidden属性就会变成true。可以通过这个属性变化来判断app是否打开，如果没有打开就跳转到下载页面。当然，这里也使用了计时器。
核心代码如下：
函数check out App(){ const scheme URL= XXX const download URL= XXX const wait=1000//是否要进入后台const hidden=false location=scheme URL//如果页面在一定时间内没有隐藏，跳转到下载页面setTimeout(()={if(！Hidden) {location=downloadurl}}，wait)//页面可见性更改事件document.addeventlistener(可见性更改，function(){ if(document . hidden){ hidden=true } })；}存在的问题
目前部分安卓浏览器，当app存在时，会先跳出一个确认框，询问用户是否打开app。只有用户同意，才会跳转到app。如果用户一直不点击确认，最后会跳转到下载页面，体验不好。
4. 一些思考
针对上面提到的一些问题，我个人认为可以在交互中增加一个“转到下载页面”的交互。如果用户没有安装app，在一定时间后，首先用类似“app是否安装，点击下载”的按钮提示用户，用户点击跳转到下载页面。这样会更好吗？
关于在Html5页面上打开应用的一些想法，这篇文章就到这里了。更多相关Html5打开app内容，请搜索往期文章或继续浏览下方相关文章。希望你以后能支持我！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。