简单粗暴法:
<a href="weixin://" ></a> 手机端浏览器输入 weixin:// 可以直接访问 <a onclick="openApp()" href="hxqdoctor://" class="video_open"></a> 我们的APP, hxqdoctor:// 欢迎来访问
判断本地是否安装APP or 去下载或者跳转的方法
1: //实际上就是新建一个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); return iframe; } } })()
2:生成一个url scheme,假设我们和原生约定的scheme是hxqdoctor://type=1&id=iewo212j32这种形式的( hxqdoctor:// 这个东西随便命名)
IOS9以上会默认弹出一个打开APP的弹出框,那么这种通过延时来打开app的方法就不适用了,需要去判断ios9以上
var openApp=function(){ var valuee=<php>echo json_encode($value)</php>; var localUrl="hxqdoctor://"+encodeURI(JSON.stringify(valuee)); var openIframe=createIframe(); 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; if(isIos){ if(isIOS9()){ //判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号 /* localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下*/ window.location.href = localUrl;//实际上不少产品会选择一开始将链接写入到用户需要点击的a标签里 return; } //判断是否是ios,具体的判断函数自行百度 window.location.href = localUrl; var loadDateTime = Date.now(); setTimeout(function () { var timeOutDateTime = Date.now(); if (timeOutDateTime - loadDateTime < 1000) { window.location.href = "你的下载ios地址"; } }, 25); }else if(isAndroid){ //判断是否是android,具体的判断函数自行百度 if (isChrome) { //chrome浏览器用iframe打不开得直接去打开,算一个坑 window.location.href = localUrl; } else { //抛出你的scheme openIframe.src = localUrl; } setTimeout(function () { window.location.href ="你的安卓下载地址"; /* http://t.cn/RcxMVvL*/ }, 500); }else{ //主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊 openIframe.src = localUrl; setTimeout(function () { window.location.href = "你的下载地址"; }, 500); } }
2-1:(附ios9判断方法)
/*判断是否是ios9以上*/ function isIOS9() { //获取固件版本 var getOsv = function () { var reg = /OS ((\d+_?){2,3})\s/; if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) { var osv = reg.exec(navigator.userAgent); if (osv.length > 0) { return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.'); } } return ''; }; var osv = getOsv(); var osvArr = osv.split('.'); //初始化显示ios9引导 if (osvArr && osvArr.length > 0) { if (parseInt(osvArr[0]) >= 9) { return true } } return false }
3:在实际做的过程当中,分享到微信以后,需要从微信打开,但是很操蛋的是我们没有张小龙。所以就需要去判断是否是微信内核,如果是则需要显示(在浏览器打开)否则隐藏,附检测是否微信方法
function isWeiXin(){ var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ return true; }else{ return false; } }
4:接下来就是触发某个事件执行了,当然了,我们的产品需要在内容页面放一个遮罩层,在微信里显示,其他浏览器隐藏,那么。。。(附遮罩层css)
$(function () { if(isWeiXin()){ $('.mask').show(); $('html,body').css("overflow","hidden"); }else{ $('.mask').hide(); } $('.open_app button,.video_open').click(function () { openApp(); //点击某个按钮触发上面的openApp方法 }) })
5:遮罩层
<div class="mask"> </div> .mask{ height:100%; 100%; position:fixed; _position:absolute; top:0; z-index:99999; opacity:0.8; filter: alpha(opacity=80); background-color:#000; }
6:然后呢,你们在测试的时候会不会遇到原生跳转H5页面的时候出现白屏,反正我是遇到了。。(附解决方案){在index.html页面head部分加入如下标签,这个是最简单的解决方案了!其他的解决方案我给你们加网址吧,我真是操碎了心。。。。}
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready file:; style-src 'self' 'unsafe-inline'; img-src 'self' data:; script-src * 'unsafe-inline' 'unsafe-eval'">
7:解决白屏网址啊。啊。。啊。。。
http://ask.dcloud.net.cn/article/25