如何在浏览器唤起App

参考博客，讲的比较详细

名词解释

Universal Link

Apple为iOS 9发布了一个所谓的通用链接的深层链接特性，即Universal links。能够方便的通过传统的HTTP/HTTPS 链接来启动App，使用相同的网址打开网站和App。

==使用==：ios在打包的时候会配置Universal Link（就是一个普通的http/https链接），通过页面中的a标签或者iframe去直接打开app，在微信中也可以直接打开。如果没有安装这个app，这个链接定向到一个可以自定义的页面。（比如app下载页面）

schema协议

scheme是一种页面内跳转协议，是一种非常好的实现机制，通过定义自己的scheme协议，可以非常方便跳转app中的各个页面。但是微信把scheme协议屏蔽掉了，只有他们专门给你加了白名单才可以，比如腾讯自家产品“应用宝”。

相关事件

• pageshow：页面显示时触发，在load事件之后触发。需要将该事件绑定到window上才会触发

• pagehide：页面隐藏时触发

• visibilitychange：页面隐藏没有在当前显示时触发，比如切换tab，也会触发该事件

• document.hidden 当页面隐藏时，该值为true，显示时为false

基本流程

1. 先判断是Android还是IOS

2. 如果是安卓，由于微信屏蔽了schema协议所以指引用户用浏览器打开

3. 在浏览器先尝试吊起App，有包的话可以直接跳转；没有的话，利用定时器延时跳转下载页。

4. 如果是IOS，利用IOS配置的Universal Link，把Universal Link指定到一个普通的页面（比如落地页）。

5. 这个Universal Link可以在微信直接唤起app，所以有包就直接打开app，没有包就打开落地页去下载。（微信貌似对一键进桌做了限制，已经无法从微信直接进应用了）

遇到问题

1. 这里如果已经安装app，打开app之后，返回网页会发现跳转到下载页，利用visibilitychange事件来取消定时器。

2. 安卓浏览器跳转要用iframe的src属性，如果使用location.href会直接打开一个404页面。

3. 浏览器打开app时会询问是否打开，这时也会跳转到下载页，这个问题魔窗也是这样并且没有
   找到解决办法，先忽略掉。

4. ios的话就需要使用location.href方法了，因为不支持iframe跳转。

5. ios一键进桌必须得在配置了ulink才可以，然后把https://ulink.xxx.com/com.xx.majiang.xin///com.xx.majiang.hn/?ftId=992516配置到ios跳转链接中，把参数改成我们配置的。

6. 不能把Universal Link直接放到浏览器的地址栏，甚至直接在代码中执行window.location.href都不可以。必须有点击行为。

7. universal link在2018年初也被微信给屏蔽了，就连itunes链接也屏蔽了。没办法只能通过浏览器去跳转。

示例代码

    按钮
    

如何配置

1. 在魔窗后台的产品管理项查看Universal Link和Bundle ID

2. 在项目的根目录需要添加一个apple-app-site-association.json文件。进行添加配置。

    "applinks":{
        "apps": [],
        "details":[
            {
                "paths":["/com.xx.majiang.siyang/*"],
                "appID":"6LLQDLVF5L.com.xx.majiang.siyang"
            }
        ]
    }
   

   paths是在apple-app-site-association文件的同级自己创建的目录（Universal Link不生效时指向的路径 ），appID前面是teamID（开发者账号里应该可以看）后面就是Bundle ID

3. 在自己创建的目录中创建一个同名目录，把这个目录名设置在魔窗后台的mLink下对应的游戏中Universal Link项。

4. 最后页面中的URI是产品管理中的Universal Link + mLink中Universal Link + 参数?ftId=

5. 在chrome浏览器的模拟器中通过创建UA进行本地调试。常见UA如下：Mozilla/5.0 (iPhone; CPU iPhone OS 6_1_3 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Mobile/10B329 MicroMessenger/5.0.1

   iOS - 微信：
   Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 MicroMessenger/6.6.1 NetType/WIFI Language/zh_CN
   
   iOS - QQ：
   Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 QQ/7.3.5.473 V1_IPH_SQ_7.3.5_1_APP_A Pixel/1125 Core/UIWebView Device/Apple(iPhone X) NetType/WIFI QBWebViewType/1
   
   iOS - 微博：
   Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Mobile/15C202 Weibo (iPhone10,3__weibo__8.1.0__iphone__os11.2.2)
   
   iOS - safari：
   Mozilla/5.0 (iPhone; CPU iPhone OS 11_2_2 like Mac OS X) AppleWebKit/604.4.7 (KHTML, like Gecko) Version/11.0 Mobile/15C202 Safari/604.1
   
   android - 微信：
   Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 MicroMessenger/6.6.1.1220(0x26060135) NetType/WIFI Language/zh_CN
   
   android - QQ：
   Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20; wv) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/57.0.2987.132 MQQBrowser/6.2 TBS/043807 Mobile Safari/537.36 V1_AND_SQ_7.3.2_762_YYB_D QQ/7.3.2.3350 NetType/WIFI WebP/0.3.0 Pixel/1080
   
   android - 微博：
   Mozilla/5.0 (Linux; Android 4.4.2; PE-TL20 Build/HuaweiPE-TL20) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/30.0.0.0 Mobile Safari/537.36 Weibo (HUAWEI-PE-TL20__weibo__8.0.2__android__android4.4.2)