不管是app的下载链接还是普通文件的链接在微信内置浏览器或者QQ内置浏览器分享都会被拦截。这是腾讯对第三方下载域名实施的打压政策。被屏蔽了也就意味着链接在微信中是无法正常打开的，那么此时用户在微信内打开就会提示“已停止访问该网页”。那么我们遇到这个问题该怎么办呢。
首先我们要解决域名被拦截的阻碍，其次就是实现微信内直接下载app或打开指定页面的功能。下面给大家大概分析一下如何实现功能和实现后的效果。
首先我们需要对分享域名加JS防封接口，这需要对php代码进行处理，然后我们再加入浏览器外跳接口，以达到我们的期望需求。
案例展示：
到这里就基本解决了上述的问题，我们在微信中分享下载链接或二维码就不会出现无法打开或无法下载的现象了，这样我们就可以直接在微信内分享下载链接和二维码进行宣传引流，如此以来我们就能够极大的提高自己的APP在微信中的推广转化率，充分利用微信的用户群体来宣传引流。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>下载海玛特客户端</title>
<meta name="viewport" content="width=320.1, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta content="telephone=no" name="format-detection" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--link href="css/main.css" rel="stylesheet" type="text/css"-->
<style type="text/css">
body {height: 100%;}
.container {padding:0 20px;background-image: url(images/bg.jpg);background-position: center center;background-size: 100% 100%;height: 100%;}
.dl-step {padding-top: 58px;}
.dl-step .step {clear: both;}
.dl-step .index {float: left;height: 36px;width: 36px;border: 2px solid #fff;background-color: #ffba26;border-radius: 50%;text-align: center;line-height: 36px;position: relative;background-clip: padding-box;color: #fff;}
.dl-step .content {margin-left: 70px;border-radius: 4px;padding:8px 13px 13px;position: relative;}
.dl-step-1 {margin-bottom: 60px;position: relative;}
.dl-step-1 .content {background-color: #ffba26;box-shadow: 0 1px 2px rgba(0,0,0,0.5);font-size: 15px;color: #fff;padding: 0 13px;height: 38px;line-height: 38px;}
.dl-step-1:before {
content: "";
display: block;
width: 89px;
height: 75px;
position: absolute;
right: 0;
top: -56px;
background-image: url(images/icons.png);
background-size: auto 213px;
background-repeat: no-repeat;
background-position: 0 0;
z-index: 10;
}
.dl-step-1 .index:before {
content: "";
display: block;
height: 45px;
width: 2px;
background-color: #fff;
position: absolute;
top: 45px;
left: 17px;
border-radius: 2px;
}
.dl-step-2 {margin-bottom: 58px;}
.dl-step-2 .index, .dl-step-3 .index {background-color: rgba(39,41,57,0.2);}
.dl-step-2 .content, .dl-step-3 .content {background-color: rgba(255,255,255,0.9);box-shadow: 0 1px 2px rgba(0,0,0,0.3);}
.dl-step-2 .content .tip, .dl-step-3 .content .tip {margin-bottom: 2px;font-size: 15px;color: #333;font-family: Microsoft Yahei;}
.dl-step-2 .index:before {
content: "";
display: block;
height: 128px;
width: 2px;
background-color: #fff;
position: absolute;
top: 45px;
left: 17px;
border-radius: 2px;
}
.dl-devices {overflow: hidden;}
.dl-devices .item {background-color: #ceecfb;width: 49%;float: left;padding: 5px 0;}
.dl-devices .android {margin-left: 1px;}
.dl-devices .name {float: left;background-color: #fff;padding: 0 4px;color: #666;line-height: 14px;font-size: 12px;font-family: Microsoft Yahei;}
.dl-devices .icon {height: 40px;clear: left;background-image: url(images/icons1.png);background-size: auto 213px;background-repeat: no-repeat;}
.dl-devices .desc {color:#666;font-size: 10px;text-align: center;font-family: Microsoft Yahei;}
.dl-devices .ios .icon {background-position: center -85px;}
.dl-devices .android .icon {background-position: center -131px;}
.dl-step-3 .app {background-color: #ceecfb;padding: 8px 25px;}
.dl-step-3 .app .icon {padding-left: 38px;height:31px;line-height:31px;background-image: url(images/icons2.png);background-repeat: no-repeat;background-position: -29px -182px;background-size: auto 213px;font-size: 10px;color: #666;font-family: Microsoft Yahei;}
.dl-step .content:before {
content: "";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
border-right-color: rgba(0,0,0,0.1);
position: absolute;
top: 14px;
left: -11px;
}
.dl-step .content:after {
content: "";
display: block;
height: 0;
width: 0;
border: 5px solid transparent;
position: absolute;
top: 13px;
left: -10px;
}
.dl-step-1 .content:after {border-right-color: #ffba26;}
.dl-step-2 .content:after, .dl-step-3 .content:after {border-right-color: rgba(255,255,255,0.9);}
</style>
<script>
/*首先判断是否是pc，若是pc访问则跳转到http://app.ctrip.com/*/
var u = navigator.userAgent || '';
var isPC = !/(iphone|ios|android|mini|mobile|mobi|Nokia|Symbian|iPod|iPad|Windows\s+Phone|MQQBrowser|wp7|wp8|UCBrowser7|UCWEB|360\s+Aphone\s+Browser)/i.test(u);
if (isPC) { location.href = "http://www.hipermart.com.cn"; }
</script>
<script src="js/require.min.js"></script>
<!--script type="text/javascript">
var libs = 'libs_r_3.js';
if (!('__proto__' in {})) {
libs = 'libs_jq_r_1.1.js';
}
document.write('<script type="text/javascript" src="js/' + libs + '"></' + 'script>');
</script-->
<!--script src="js/m.ctrip.com.core.min.js"></script-->
<script>
var isPC = false;
var e = navigator.userAgent ? navigator.userAgent.toLowerCase() : '';
var iswx = /micromessenger/.test(e) ? !0 : !1;
var wxurl = '';
if (iswx) {
wxurl = "http://mp.weixin.qq.com/mp/redirect?url=";
}
// window.onload = function () { //修复图片偶尔不能加载
function hello() { //修复图片偶尔不能加载
var appUrl = "http://app.hipermart.com.cn:8888/apk/hipermart.apk";
if (!isPC && !iswx) {
if(appUrl){
location.href = appUrl;
}else if(sid){
location.href = "/m/" + sid;
}
}
}
</script>
</head>
<body onload="hello()">
<div class="container">
<div class="dl-step">
<div class="step dl-step-1">
<div class="index">1</div>
<div class="content">点击右上方</div>
</div>
<div class="step dl-step-2">
<div class="index">2</div>
<div class="content">
<p class="tip">选择在浏览器中打开</p>
<div class="dl-devices">
<!--div class="item ios">
<span class="name">iOS</span>
<div class="icon"></div>
<p class="desc">在Safari中打开</p>
</div-->
<div class="item android">
<span class="name">安卓</span>
<div class="icon"></div>
<p class="desc">在浏览器中打开</p>
</div>
</div>
</div>
</div>
<div class="step dl-step-3">
<div class="index">3</div>
<div class="content">
<p class="tip">即可自动下载APP</p>
<div class="app">
<div class="icon">海玛特客户端</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
3589
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
