1. 程式人生 > >微信內點擊鏈接或掃描二維碼直接打開手機默認瀏覽器打開指定網頁

微信內點擊鏈接或掃描二維碼直接打開手機默認瀏覽器打開指定網頁

ali afa 提示 實現 url 5.1 UNC alt ddd

需求分析

將打包好的apk/ios文件部署到服務器,把下載頁面的URL通過二維碼編輯器或根據URL代碼生成一個二維碼,然後通過二維碼進行微信推廣已經成為很多用戶慣用的方式。但微信會對含apk/ios文件的鏈接進行了屏蔽,所以導致微信掃碼打不開下載鏈接。理想的狀態是安卓自動下載,蘋果點擊左上角按鈕前往Safari下載。那麽究竟該如何處理才能達到理想的結果呢?

我們知道 js 可以通過 window.navigator.userAgent 來獲取瀏覽器的相關信息,比如:Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/33.0.1750.154 Safari/537.36,那麽我們也可以通過該方法來獲取微信內置瀏覽器的相關信息:Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_1 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Mobile/11d201 MicroMessenger/5.3。根據關鍵字 MicroMessenger 來判斷是否是微信內置的瀏覽器。從而實現安卓自動下載或跳轉到瀏覽器打開下載鏈接,蘋果會提示點擊右上角的按鈕前往Safari下載。

技術分享圖片

代碼編程

HTML代碼

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

CSS代碼

1 #weixin-tip{display:none;position:fixed;left:0;top:0;background:rgba(0,0,0,0.8);filter:alpha(opacity=80);width:100%;height:100%;z-index:100;}
2 #weixin-tip p{text-align:center;margin-top:10%;padding:0 5%;position:relative;}
3 #weixin-tip .close{color:#fff;padding:5px;font:bold 20px/24px simsun;text-shadow:0 1px 0 #ddd;position:absolute;top:0;left:5%;}

JS封裝代碼

1 var is_weixin = (function(){return navigator.userAgent.toLowerCase().indexOf(‘micromessenger’) !== -1})();
2 window.onload = function() {
3 var winHeight = typeof
window.innerHeight != ‘undefined’ ? window.innerHeight : document.documentElement.clientHeight; //兼容IOS,不需要的可以去掉 4 var btn = document.getElementById(‘J_weixin’); 5 var tip = document.getElementById(‘weixin-tip’); 6 var close = document.getElementById(‘close’); 7 if (is_weixin) { 8 btn.onclick = function(e) { 9 tip.style.height = winHeight + ‘px’; //兼容IOS彈窗整屏 10 tip.style.display = ‘block’; 11 return false; 12 } 13 close.onclick = function() { 14 tip.style.display = ‘none’; 15 } 16 } 17 }


至此,我們就可以直接用微信掃描二維碼在微信中分享和宣傳引流了。這樣我們能夠極大的提高自己的APP在微信中的推廣轉化率。解決掉了微信中下載鏈接被屏蔽等問題。充分利用微信的用戶群體來宣傳引流。

微信內點擊鏈接或掃描二維碼直接打開手機默認瀏覽器打開指定網頁