H5页面打开app的一些思考
2020/3/30 11:02:35
本文主要是介绍H5页面打开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,点击去下载”类似的按钮,用户点击跳转到下载页面,这样会不会更好呢。
这篇关于H5页面打开app的一些思考的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-26结对编程到底难不难?答案在这里
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)