名词解释
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
基本流程
-
先判断是Android还是IOS
-
如果是安卓，由于微信屏蔽了schema协议所以指引用户用浏览器打开
-
在浏览器先尝试吊起App，有包的话可以直接跳转；没有的话，利用定时器延时跳转下载页。
-
如果是IOS，利用IOS配置的Universal Link，把Universal Link指定到一个普通的页面（比如落地页）。
-
这个Universal Link可以在微信直接唤起app，所以有包就直接打开app，没有包就打开落地页去下载。（微信貌似对一键进桌做了限制，已经无法从微信直接进应用了）
遇到问题
-
这里如果已经安装app，打开app之后，返回网页会发现跳转到下载页，利用visibilitychange事件来取消定时器。
-
安卓浏览器跳转要用iframe的src属性，如果使用location.href会直接打开一个404页面。
-
浏览器打开app时会询问是否打开，这时也会跳转到下载页，这个问题魔窗也是这样并且没有
找到解决办法，先忽略掉。 -
ios的话就需要使用location.href方法了，因为不支持iframe跳转。
-
ios一键进桌必须得在配置了ulink才可以，然后把
https://ulink.xxx.com/com.xx.majiang.xin///com.xx.majiang.hn/?ftId=992516配置到ios跳转链接中，把参数改成我们配置的。 -
不能把Universal Link直接放到浏览器的地址栏，甚至直接在代码中执行window.location.href都不可以。必须有点击行为。
-
universal link在2018年初也被微信给屏蔽了，就连itunes链接也屏蔽了。没办法只能通过浏览器去跳转。
示例代码
<style type="text/css">
a{
width: 200px;
height: 100px;
background: green;
color: black;
}
iframe{
width: 0;
height: 0;
display: none;
}
</style>
<body>
<a>按钮</a>
<iframe></iframe>
</body>
<script src="jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var u = navigator.userAgent;
var ua = navigator.userAgent.toLocaleLowerCase();
var parame = window.location.search;
if(u.indexOf('Android') > -1 || u.indexOf('Linux') > -1){
// 判断是安卓机
if(ua.match(/Micromessenger/i) == 'micromessenger'){
alert("请用浏览器打开");
}else{
$('a').on('click',function(){
$("iframe").attr('src','puyangmajiang://puyang_easy_into_table'+parame.split("&")[0]);
var timer = setTimeout(function(){
window.location.href= '/qipai/xx/puyang.html';
},500);
$(document).on('visibilitychange webkitvisibilitychange', function() {
clearTimeout(timer);
})
});
}
}else if(u.indexOf('iPhone') > -1){
// 判断是苹果手机
$("a").on('click',function(){
window.location.href= "https://ulink.xx.com/com.majiang.xin//ulink/"+parame.split("&")[0];
});
}
</script>
如何配置
-
在魔窗后台的产品管理项查看Universal Link和Bundle ID
-
在项目的根目录需要添加一个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
-
在自己创建的目录中创建一个同名目录，把这个目录名设置在魔窗后台的mLink下对应的游戏中Universal Link项。
-
最后页面中的URI是
产品管理中的Universal Link+mLink中Universal Link+参数?ftId= -
在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.1iOS - 微信： 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)
网友评论