您的位置：首页 > 移动开发

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

2015-11-04 16:49 901 查看

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

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

第2种方法思路：

制作一个app下载页 app-index.html，逻辑如下：

如果，是weixin浏览器：

如果，是iphone 或者 ipad：

则显示“使用Safari打开”

否则

显示“使用浏览器打开”

否则：

显示下载页面

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

效果如下：

<!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">
©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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航