名词解释
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.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)