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，就会在一段时间后跳转到下载页面。
核心代码如下：（可以使用ifr am e完成跳转，但需要考虑iframe是否在ios等设备中被允许）
const schemeUrl = 'xxx'
const downloadUrl = 'XXX'
const w ai t = 500
try {
location = schemeUrl
setTimeout(() => {
location = downloadUrl
}, wa IT )
} 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的一些思考的 文章 就介绍到这了,更多相关Ht ML 5打开app内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 浅谈Html5页面打开app的一些思考 全部内容，希望文章能够帮你解决 浅谈Html5页面打开app的一些思考 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于浅谈Html5页面打开app的一些思考的详细内容...