手机浏览器通过Scheme跳转APP,兼容各种手机浏览器

       一个比较完整的产品线,必定有APP和网站,另外还有微信公众号网页和小程序。那么有一个比较常见的需求就是在手机浏览器内打开APP,实现起来也比较简单,只要APP配置的有URLScheme即可。但是因为无法判断是否安装APP,所有只能尝试去打开APP,如果打不开则跳转到APP下载页面。另外手机浏览器的类型很多,各个浏览器显示的效果也不一样,一直无法找到一个完全兼容所有浏览器的方法,没有完美的解决方案。

  打开APP的操作就是链接打开 location.href = "scheme://",APP未安装的时候链接打开有的时候会跳转到错误页面,所以可以使用iframe来跳转,保证浏览器链接一直在当前页面 document.querySelector("#iframeId").src = "scheme://",打开APP大部分手机浏览器会弹窗是否允许跳转打开。

  打开APP失败时跳转到下载,因为无法判断打开是否成功,所以通过setTimeout两秒后跳转下载地址。下载地址ios:https://itunes.apple.com/cn/app/要跳转的APP的appid,安卓下载地址自定义即可,放到自己的服务器地址上边,浏览器打开.apk地址自动提示下载。

测试了流行的几个手机浏览器,总结一下需要注意以下几点:

  1. 微信公众号网页打开APP,微信已经开放了接口,在微信开放平台配置域名代码里面添加按钮后即可跳转,小程序打开APP也有相关文档说明。https://devel

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值