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

您所在的位置:网站首页 百度搜索跳转appstore 手机浏览器通过Scheme跳转APP,兼容各种手机浏览器

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

2024-06-19 09:33| 来源: 网络整理| 查看: 265

 一个比较完整的产品线,必定有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://developers.weixin.qq.com/doc/oplatform/Mobile_App/Resource_Center_Homepage.html

  2. 安卓下的谷歌浏览器无法通过iframe的方式打开,必需使用location.href。

  3. 手机百度浏览器不支持打开APP,这个是百度自己的问题,不允许打开APP。另外百度浏览器中页面的按钮文字含有“下载”或“打开”的时候,按钮会被百度给隐藏掉(好霸道),所以只能换下文字或者加空格“下 载”“打 开”。

  4. UC浏览器页面初始化后直接通过js打开APP打开不了,需要点击实际的按钮触发打开。

最终实现的方式如下:

1. 通过js判断浏览器类型 

 var Navigator = navigator.userAgent;   var ifChrome = Navigator.match(/Chrome/i) != null && Navigator.match(/Version\/\d+\.\d+(\.\d+)?\sChrome\//i) == null ? true : false; //判断是不是谷歌浏览器   var ifAndroid = (Navigator.match(/(Android);?[\s\/]+([\d.]+)?/)) ? true : false; //判断是不是安卓   var ifIos = /(iPhone|iPad|iPod|iOS)/i.test(Navigator); //判断是不是ios   var ifUCorBaidu = /(UCBrowser|baiduboxapp)/i.test(Navigator); //判断是不是UC或百度浏览器   var openUrl = "scheme://";   var androidDownUrl = "https://xxx/1.0.0.apk";   var iosDownUrl = "https://itunes.apple.com/cn/app/要跳转的APP的appid";

2. 分别操作

{{text}} if(ifUCorBaidu) {   this.text = '点 击 下 载 APP'; } else {   this.text = '正在跳转中';   openApp(); } //这里使用了vue,也可以用其他方式修改按钮文字 function openApp() { window.onblur = function() {   if(myTimeout) {     clearTimeout(myTimeout);   } }; //onblur可以检测到页面消失,这时候一般已经打开了APP,就清除掉下载定时器,不跳出下载链接。 if (ifIos) {   if(ifUCorBaidu) {     window.location.href = iosDownUrl; //ios跳到App Store也可以打开APP,所以直接打开就好了。   } else {     window.location.href = openUrl;     var myTimeout = setTimeout(function () {       window.location.href = iosDownUrl;     }, 1000);   } else{     if(ifChrome && ifAndroid) {       setTimeout(function() {         window.location.href = openUrl;       }, 50)     } else {       document.querySelector("#myDown").src = openUrl;     }     var loadDateTime = Date.now();     setTimeout(function() {       var myTimeout = setTimeout(function() {       var timeOutDateTime = Date.now();       if (loadDateTime && (timeOutDateTime - loadDateTime) < (1500 + 200)) {           window.location.href = androidDownUrl         } //这里的操作跟直接setTimeout是一样的       }, 1500);     }, 100)   } } }

经过测试 百度浏览器,QQ浏览器,UC浏览器,360浏览器,搜狗浏览器,夸克浏览器,Safari浏览器效果都还算理想。



【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3