今天有朋友問我h5跳轉app怎么做，隔了好久，很多都忘了，無奈翻出老代碼又大概縷了一遍，為了防止再次忘記，記錄一下，哈哈哈😆
var openApp=function(appdata){//(此處的appdata是我們需要往app傳的參數，根據需求和頁面結構，可傳可不傳)
//實際上就是新建一個iframe的生成器
var createIframe=(function(){
var iframe;
return function(){
if(iframe){
return iframe;
}else{
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
// iframe.onload=function(){
// alert(0);
// }
return iframe;
}
}
})()
var config={
// 生成一個url scheme,和原生約定好，隨便命名（ios的scheme_IOS，不太實用，幾乎不用）
scheme_IOS: 'scheme名字+需要往app傳的參數,（例如scheme_Adr所寫）
scheme_Adr: 'openowhat://owhat.cn/scheme?opentype='+appdata.opentype+'&entityid='+appdata.entityid+'&goodstype='+appdata.goodstype+'&articletype='+appdata.articletype,
timeout:600
}
var openApp=function(){//打開直接跳轉
var u = navigator.userAgent;
var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
var isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android終端
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
var localUrl=isIos?config.scheme_IOS:config.scheme_Adr;
var openIframe=createIframe();//創建的iframe
function isWeiXin(){//判斷在不在微信里面
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
}
var urls='';
if(isIos){//ios里面（這個百度一下，是一個IOS9+的新功能，叫Universal Links,https://mul.owhat.cn/shop/這個鏈接是后台新建的鏈接，具體步驟就百度Universal Links的用法就有。）
//大體原因是
//前端開發經常面臨跨域問題，必須要求跨域，如果不跨域，就不行。
//只有當前webview的url域名，與跳轉目標url域名不一致時，Universal Link 才生效
window.location.href='https://mul.owhat.cn/shop/+需要給app的參數
}else if(isAndroid){//安卓里面
if(isWeiXin()){//如果是微信，跳應用寶
window.location.href='應用寶鏈接';
}else{
//如果不是微信，某秒之后打不開（說明沒有下載app）就直接下載
if (isChrome) {
//chrome瀏覽器用iframe打不開得直接去打開，算一個坑
window.location.href = localUrl;
} else {
//拋出你的scheme
openIframe.src = localUrl;
}
var startTime = Date.now();
var t = setTimeout(function() {
var endTime = Date.now();
if (!startTime || endTime - startTime < config.timeout + 200) {
window.location.href = "安卓包鏈接";
}
}, config.timeout);
$(document).on('visibilitychange webkitvisibilitychange', function() {
var tag = document.hidden || document.webkitHidden;
if (tag) {
clearTimeout(t);
}
});
$(window).on('pagehide', function() {
clearTimeout(t);
});
$(window).on("blur",function(){
clearTimeout(t);
});
}
}else{
//主要是給winphone的用戶准備的,實際都沒測過，現在winphone不好找啊
openIframe.src = localUrl;
var t = setTimeout(function () {
window.open("../download/index.html");//你的下載地址（網站內部自己的下載頁面）
}, 500);
}
}
$(".js-download").on("click",function(){//點擊按鈕的時候跳app
openApp();
});
$(".js-cancle_download").off("click").on("click",function(){//把跳轉的按鈕條去掉（公司內部代碼，忽略）
$("#downnav").remove();
$("#detailNav").find(".nav_nei").removeClass('downtop96');
$(".brace").css("top","0.76rem");
});
}
//大概思想
1.ios主要用Universal Links來實現
2.安卓在微信里面跳轉應用寶，由於我們公司app下載量啥的不夠，所以沒有用applink
3.安卓在其他瀏覽器用的是scheme。
