微信浏览器禁止app下载链接怎么办

最新推荐文章于 2023-03-31 11:10:31 发布

zxphwz

最新推荐文章于 2023-03-31 11:10:31 发布

阅读量7.3k

点赞数 1

通过扫描二维码下载APP已成为一个非常方便的方式，微信也成为扫描二维码重要的工具，但是扫描后微信浏览器会对APK和appStore的链接进行屏蔽，导致用户无法正常下载。本文提供两个迂回的解决方案：1.使用腾讯应用宝；2.提示用户使用浏览器打开。

第1种方法不用介绍了，把APP提交给腾讯应用宝即可，需要等待腾讯的审批，审批条件比较苛刻，腾讯采用分级审批方式，如果你是高级开发者，可以不审批先上线，如果是低级开发者，那么辛苦地等待吧。通过之后，会生成一个下载页面，该页面同时还能够跳转到appStore，前提是先录入appStore的相关信息。
第2种方法思路：
制作一个app下载页 app-index.html，逻辑如下：

如果，是weixin浏览器：
如果，是iphone 或者 ipad：
则显示“使用Safari打开”
否则
显示“使用浏览器打开”
否则：
显示下载页面

测试样例，扫描下面二维码：

效果如下：
IMG_0168(0)

IMG_0169(0)

IMG_0170(1)

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <style>
body,h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{
        font-family: STXihei, STHeiti, "华文细黑", "Microsoft YaHei", "微软雅黑", SimSun, "宋体", Heiti, "黑体", sans-serif;
}
a{
        text-decoration:none;
        color:#ffffff;
}
.container:before, .container:after {
    content: " ";
    display: table;
}

.container:after {
    clear: both;
}

.logo{
        text-align:center;
}

.logo img{
    width:100px;
}

.title{
        text-align:center;
        margin-top:15px;
}

.title h1{
        font-size:25px;
        font-weight:500;
        color:#999;
}


.icon_row{
    margin:auto;
    display:table;
}
.icon_row>div{
    float:left;
    margin:0 5px;

}
.icon_row>div a{
        margin:auto;
    height:90px;
    overflow:hidden;
}


.app_btn{
        display:block;
        width:70px;
        text-align:center;
        color:#ffffff;
        padding:10px;

}
.green_btn{
    background-color:rgb(0,177,106);
}

.orange_btn{
        background-color:rgb(247,148,30);
}

.green_btn2{
        background-color:#3bbe01;
}

.orange_btn2{
        background-color:#f7a900;
}

.gray_btn{
    background-color:#dddddd;
}

.blue_btn{
    background-color:rgb(20,162,212);
}


.copyright{
        font-size:12px;
        text-align:center;
        color:#777;
        border-top:1px solid #eee;
        margin-top:20px;
        padding:10px 0;

}
.copyright img{
        margin-bottom:-4px;
}
#main{
    display:none;
}
#weixin{
    display:none;
}
.weixin-0{
    color:#555;
    padding:10px;
}
.weixin-arrow{
    position:absolute;
    right:30px;
    top:10px;
}
.weixin-1{
    font-size:1.5em;
    position:absolute;
    left:30px;
    top: 60px;
}
.weixin-2{
    margin-top:20px;
    font-size:1.5em;
    position:absolute;
    left:30px;
    top:74px;
}
    </style>
    <title>龙江女性APP下载</title>

        <body>
            <div id="main">
                <div class="container logo">
                        <img src="/themes/default/img/app-logo.png">
                </div>
                <div class="container title">
                    <h1>点击下面图标下载</h1>
                </div>
                <div class="container icon_row">
                        <div><a href="http://a.hljwomen.org/apk/hljwomen.apk" class="app_btn green_btn"><img src="/themes/default/img/android_icon.png"><br>安卓</a></div>
                        <div><a href="javascript:void(0);" onclick="javascript:iosInstall();" class="app_btn orange_btn"><img src="/themes/default/img/ios_icon.png"><br>苹果</a></div>
                        <div><a href="http://a.hljwomen.org/app/webapp.html" class="app_btn blue_btn"><img src="/themes/default/img/webapp-icon.png"><br>手机网页</a></div>
                </div>
                <div class="container copyright">
                        &copy;2014 hljwomen.org 版权所有 ·
                        Made in <a href="http://www.comingx.com"><img src="/themes/default/img/comingx.png"></a>
                </div>
             </div>
             <div id="weixin">
                 <div class="weixin-0">请按提示操作</div>
                 <div class="weixin-arrow"><img src="/themes/default/img/weixin-arrow.png" /></div>
                 <div class="weixin-1">1. 点击</div>
                 <div id="step2" class="weixin-2">2. 在Safari中打开</div>
             </div>
<script>
  var browser={
    versions:function(){
      var u = navigator.userAgent, app = navigator.appVersion;
        return {
          trident: u.indexOf('Trident') > -1,
          presto: u.indexOf('Presto') > -1,
          webKit: u.indexOf('AppleWebKit') > -1,
          gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,
          mobile: !!u.match(/AppleWebKit.*Mobile.*/),
          ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
          android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
          iPhone: u.indexOf('iPhone') > -1 ,
          iPad: u.indexOf('iPad') > -1,
          webApp: u.indexOf('Safari') == -1
       }
    }(),
    language:(navigator.browserLanguage || navigator.language).toLowerCase()
  };
function is_weixin(){  
    var ua = navigator.userAgent.toLowerCase();  
    if(ua.match(/MicroMessenger/i)=="micromessenger") {  
        return true;  
    } else {  
        return false;  
    }  
}
function iosInstall(){
    if(!browser.versions.mobile){
        alert("请使用手机访问该网页");
        return;
    }
    url = "http://www.pgyer.com/app/install/bb3bd0353df6c3d3e39dc08523fd4e9e";
    window.location.href = url;
}
function init(){
    if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){
        document.getElementById("main").style.display="block";return;
    }
    if(is_weixin()){
        document.getElementById("weixin").style.display="block";
        if(browser.versions.ios || browser.versions.iPhone || browser.versions.iPad){
            document.getElementById("step2").innerHTML="2. 在Safari中打开";
        }else{
            document.getElementById("step2").innerHTML="2. 在浏览器中打开";
        }
    }else{
        document.getElementById("main").style.display="block";
    }
}
init();
</script>
        </body>
</html>