iOS/Android 浏览器(h5)及微信中唤起本地APP

会遇到的问题：

如何解决未安装APP时的做好引导页
如何在微信中唤醒APP
在iOS9中如何处理universal link被用户误关的情况
如何解决Android各种机型、各种第三方浏览器导致的兼容问题等
在APP未安装情况下，引导用户下载后打开APP后，如何进入之前唤起时指定的页面或内容，即如何实现场景还原
在微信中唤醒APP时，如何进入指定的页面或内容

原理说明

首先需要说明，不管iOS还是Android，浏览器都不可能预知本地是否安装了某个APP的。或者更严谨地说，我们不能通过浏览器来预知本地是否安装。因为就算浏览器可以读取本地应用的安装列表，但是目前也没任何一家浏览器提供查询的API，所以这条路是走不通的。

本质上浏览器是通过URL scheme打开APP，一个APP可以设置一个或多个打开自己的URL scheme。比如，Twitter就注册自己能被「twitter://」打开。

实现方案

1.检测浏览器类型


    let browser = {versions: () => {let u = navigator.userAgent// let app = navigator.userAgentreturn {android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,iPhone: u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1,weixin: u.toLowerCase().indexOf('micromessenger') > -1,appVersion: (u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1) && /OS ((\d+_{2,3})\s/.exec(u[0].replace('OS','').replace('os','').replace(/\s+/g,'').replace(/_/g, '.')}}}

2.打开app函数


    openApp (openUrl, appUrl, action, callback) {// 检查app是否打开function checkOpen (cb) {let _clickTime = +(new Date())let flag = falsefunction check (elsTime) {if (elsTime > 3000 || document.hidden || document.webkitHidden) {flag = truecb(flag)} else {cb(flag)}}// 启动间隔20ms运行的定时器，并检测累计消耗时间是否超过3000ms，超过则结束let _count = 0let intHandle = setInterval(function () {_count++var elsTime = +(new Date()) - _clickTimeif (_count >= 100 || elsTime > 3000) {clearInterval(intHandle)check(elsTime)}}, 20)}// 在iframe 中打开APPvar ifr = document.createElement('a')ifr.href = openUrlifr.style.display = 'none'let event = document.createEvent('MouseEvents')event.initEvent('click', true, true)ifr.dispatchEvent(event)// window.location.href = openUrlif (callback) {checkOpen(function (opened) {callback && callback(opened)})}document.body.appendChild(ifr)setTimeout(function () {document.body.removeChild(ifr)}, 2000)},

理想过程是这样：浏览器尝试打开 URL scheme，在1秒计时后，检查当前时间，如果实际时间已过 1200 毫秒，说明唤起APP 成功（唤起 APP 会让浏览器的定时器变慢）；如果没超过 1200 毫秒，很可能是没有安装应用，就跳到下载地址。

但原理都是一样，利用setTimeout。但这其实不稳定，因为Android是基于Linux的分时多任务的，setTimeout的基准偏差可能会没那么大。

但如果设置比较小的运行间隔（<30ms），在浏览器或者webview中，应用切换到后台，setInterval会被很明显的延迟执行，比如设置一个运行间隔20ms，总计运行100次的定时器，如果页面一直处于前台，则100次跑完，总耗时与 100x20=2000ms不会有太大差异，但页面在后台运行时，此时间会明显超过2000ms。可以利用这一点来实现是否成功打开APP检测及回调。

另外，可以通过 document.hidden 或 document.[webkit|moz|ms]Hidden 来判断页面是否被置入后台（即应用被唤起），或visibilitychange事件，但对于Android 4.4版本一下则不支持。

3.点击按钮的时候


    if (this.info.weixin) {  // alert('请在系统浏览器中打开')  在微信中你的操作} else {if (this.info.iPhone) { // ios中this.openApp('你的app', 'xxx', xxx, (flag) => {if (!flag) {alert('失败了') //你的操作}})} else if (this.info.android) { //androidthis.openApp('你的app', 'xxx', xxx, (flag) => {if (!flag) {alert('失败了') // 你的唤起失败操作}})}}

在 iOS 9 上，iframe 方案变得不可用。
不能使用之前Android的代码，因为在打开自定义 URL scheme 时，会弹出对话框，询问是否用 xx 应用来打开。往往用户还没来得及点击打开，定时器又触发了，导致跳到 App Store。

可以在尝试打开URL scheme 后，再加一个页面跳转，这样对话框会被覆盖，再刷新页面，就能无需确认唤起APP：

$('a').click(function() {location.href = '自定义 URL scheme';location.href = '下载页';location.reload();
}

这里，下载页延时 2 秒跳转到 App Store。

APP已安装这是没问题的，但如果APP未安装，跳 App Store 的请求会失败。
这时可以使用两个定时器：

$('a').click(function() {location.href = '自定义 URL scheme';setTimeout(function() {location.href = '下载页';}, 250);setTimeout(function() {location.reload();}, 1000);
}

不过在iOS9中其实是支持universal link的，就是一个http域名形式，在微信中都可以唤起APP。如果未安装的话，可以直接引导用户去APP store下载。

可以参考这篇文章

http://www.magicwindow.cn/doc/#universal-link-info

微信中打开

因为微信将唤起本地APP的接口给禁了，所以微信中是不能直接唤起APP的，一般做法是提示用户在浏览器中打开，之后的流程还是我们上面讲的内容。

但是，在iOS9中，这个限制是可以突破的，也就是说可以直接唤起APP。方法就是使用我们上文提到的universal link。

在Android和iOS8及其以下系统中，我们可以利用腾讯的亲儿子：应用宝。简单讲，就是把你的唤起地址配置成你APP的应用宝地址，微信中跳转到这个地址后，如果用户已经安装了APP，则可直接唤起，如果没有安装，则可直接点击下载，

H5页面唤醒app的方法相关推荐

webview调用ios或者安卓的方法（内嵌h5页面调用app原生方法）
1.配合使用调用app原生的方法(h5页面不需要回调和数据) 实例1 //通知客户端,token失效 callTokenLostToApp(){let boswer=vm.config.getBrow ...
H5页面唤醒App及App之间跳转
H5页面跳转到App,其实质是通过uri. Android配置: 清单文件中对应的Activity标签添加以下标签属性 <intent-filter><action android: ...
H5页面唤醒高德地图|百度地图App
H5页面唤醒高德地图|百度地图App 移动端H5页面唤醒app,若唤醒失败则跳转到应用商城下载. 唤醒前需要检测当前操作系统,不同的操作系统用不同的协议我这里的需求是唤醒失败就跳转到网页版的地图,若 ...
android 打开h5文件下载,微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码...
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
H5页面与app的交互（jsBridge）和小程序的交互（weixin-js-sdk）
各端引用H5页面,H5跳回各端交互. 1.H5页面与app的交互(jsBridge): 在main.ts里面: const ua = window.navigator.userAgent; let A ...
微信h5页面下载app —— 安卓直接下载apk文件包,IOS跳转AppStore的实现代码
需求:微信h5页面下载app -- 安卓直接下载apk文件包,IOS跳转AppStore 分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不 ...
html5页面和app的区别,H5页面与APP区别何在
APP相信大家都非常熟悉,就是手机里经常安装的软件程序,它都需要经过下载安装的步骤才能打开产品进行操作.不过H5页面和APP却有比较大的区别,它不需要经过下载安装,直接能够在浏览器和微信等社交平台中打 ...
h5调起app的方法；app调起vue中的某个方法
h5调起app的方法 window.fuXinJSBridge.personSuccess(par) // par 为参数:personSuccess双方约定的方法名 app调起vue中的某个方法 / ...
h5调用原生App的方法合集
h5调用原生App的方法合集 1.调用原生关闭函数 let u = navigator.userAgent let isAndroid = u.indexOf('Android') > -1 | ...

H5页面唤醒app的方法