不管是app的下載鏈接還是普通文件的鏈接在微信內(nèi)置瀏覽器或者QQ內(nèi)置瀏覽器分享都會(huì)被攔截缕坎。這是騰訊對(duì)第三方下載域名實(shí)施的打壓政策逆甜。被屏蔽了也就意味著鏈接在微信中是無法正常打開的衣洁,那么此時(shí)用戶在微信內(nèi)打開就會(huì)提示“已停止訪問該網(wǎng)頁”墓捻。那么我們遇到這個(gè)問題該怎么辦呢。
首先我們要解決域名被攔截的阻礙坊夫,其次就是實(shí)現(xiàn)微信內(nèi)直接下載app或打開指定頁面的功能砖第。下面給大家大概分析一下如何實(shí)現(xiàn)功能和實(shí)現(xiàn)后的效果。
首先我們需要對(duì)分享域名加JS防封接口环凿,這需要對(duì)php代碼進(jìn)行處理梧兼,然后我們?cè)偌尤霝g覽器外跳接口,以達(dá)到我們的期望需求智听。
案例展示:
到這里就基本解決了上述的問題羽杰,我們?cè)谖⑿胖蟹窒硐螺d鏈接或二維碼就不會(huì)出現(xiàn)無法打開或無法下載的現(xiàn)象了,這樣我們就可以直接在微信內(nèi)分享下載鏈接和二維碼進(jìn)行宣傳引流到推,如此以來我們就能夠極大的提高自己的APP在微信中的推廣轉(zhuǎn)化率考赛,充分利用微信的用戶群體來宣傳引流。
<!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訪問則跳轉(zhuǎn)到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.; }
? ? </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 () { //修復(fù)圖片偶爾不能加載
? ? ? ? function hello() { //修復(fù)圖片偶爾不能加載
? ? ? ? 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">點(diǎn)擊右上方</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">即可自動(dòng)下載APP</p>
? ? ? ? ? ? ? ? ? ? <div class="app">
? ? ? ? ? ? ? ? ? ? ? ? <div class="icon">海瑪特客戶端</div>
? ? ? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? ? ? </div>
? ? ? ? ? ? </div>
? ? ? ? </div>
? ? </div>
</body>
</html>