今天有朋友问我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。
