H5页面打开app的分析是什么样的
今天就跟大家聊聊有关H5页面打开app的分析是什么样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
成都创新互联坚持“要么做到,要么别承诺”的工作理念,服务领域包括:成都网站设计、网站制作、企业官网、英文网站、手机端网站、网站推广等服务,满足客户于互联网时代的西平网站设计、移动媒体设计的需求,帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴!
1. 需求
前段时间开发项目,遇到了一个需求,简单来说,就是我们 H5 的页面有一个“在App
中打开”的按钮,用户点击后,如果用户已经安装app
,则直接打开app
,如果用户没有安装app
,那就跳转到下载app
的页面
首先,在我的认知中,H5 应该是没有能力检测到某一款 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,如果用户始终没有点击确认,最后还是会跳到下载页面,体验不好。
看完上述内容,你们对H5页面打开app的分析是什么样的有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注创新互联行业资讯频道,感谢大家的支持。
分享标题:H5页面打开app的分析是什么样的
转载来于:http://scyanting.com/article/gpipde.html