微信掃碼提示在瀏覽器中打開的2種實現(xiàn)方式

由于微信的限制，應(yīng)用文件在內(nèi)置瀏覽器中下載全部被屏蔽掉，造成很多人用微信掃描二維碼下載時點(diǎn)擊下載按鈕沒反應(yīng)，我想到的是做一個提示用戶在瀏覽器中打開下載。

方法一：遮罩提示法

其實原來很簡單，就是判斷當(dāng)前是在微信內(nèi)置瀏覽器中，然后將默認(rèn)隱藏的提示層顯示出來。
第一步：判斷微信的UA。

var?ua?=?navigator.userAgent;
var?isWeixin?=??!!/MicroMessenger/i.test(ua);

第二步：引入默認(rèn)隱藏層。

<a?>點(diǎn)擊右上角<br/>選擇在瀏覽器中打開</p></div>

第三步：添加CSS樣式

wxtip{background:?rgba(0,0,0,0.8);?text-align:?center;?position:?fixed;?left:0;?top:?0;?width:?100%;?height:?100%;?z-index:?998;?display:?none;}
.wxtip-icon{width:?52px;?height:?67px;?background:?url(weixin-tip.png)?no-repeat;?display:?block;?position:?absolute;?right:?20px;?top:?20px;}
.wxtip-txt{margin-top:?107px;?color:?#fff;?font-size:?16px;?line-height:?1.5;}

第四步：點(diǎn)擊按鈕顯示隱藏層，點(diǎn)擊隱藏層關(guān)閉，總的JS代碼如下：

function?weixinTip(ele){	var?ua?=?navigator.userAgent;	var?isWeixin?=?!!/MicroMessenger/i.test(ua);	if(isWeixin){		ele.onclick=function(e){			window.event??window.event.returnValue?=?false?:?e.preventDefault();			document.getElementById('JweixinTip').style.display='block';
		}		document.getElementById('JweixinTip').onclick=function(){			this.style.display='none';
		}
	}
}var?btn1?=?document.getElementById('JdownApp');//下載一weixinTip(btn1);var?btn2?=?document.getElementById('JdownApp2');?//下載二weixinTip(btn2);

以上就是遮罩代碼，你再也不用擔(dān)心用戶不會操作了。

方法二：自動跳轉(zhuǎn)法
該方法需要分蘋果和安卓2種情況，我們可以用現(xiàn)有的工具接口：Getinstall
安卓：
可以直接填寫apk的下載地址，也可以直接填寫H5下載頁面的落地頁，接口判斷為安卓設(shè)備時會自動跳出外部瀏覽器，并打開填寫的地址。
蘋果：
這里就比較復(fù)雜了，由于Getinstall接口判斷設(shè)備為蘋果時，第一步會判斷是網(wǎng)頁還是下載，如果是下載APP，會自動調(diào)用AppStore的APP下載模塊，直接下載APP，如果判斷為網(wǎng)頁，則也是執(zhí)行上面的遮罩代碼，提示用戶在safari 中打開。
雖然Getinstall是專用于APP下載的接口，但如果是想要做網(wǎng)頁跳轉(zhuǎn)也是可以直接拿來使用的。