简单粗暴法:
<a href="weixin://" ></a> 手机端浏览器输入 weixin:// 可以直接访问
<a οnclick="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%;
width: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