微信提示瀏覽器開啟程式碼升級版 微信自動跳轉預設瀏覽器
阿新 • • 發佈:2019-01-10
由於微信的限制,應用檔案在內建瀏覽器中下載全部被遮蔽掉,造成很多人用微信掃描二維碼下載時點選下載按鈕沒反應,我想到的是做一個提示使用者在瀏覽器中開啟下載。
之前寫過的兩篇文章:微信開啟網址新增在瀏覽器中開啟提示 和 微信掃描開啟APP下載連結提示程式碼優化,儘管已經做得很簡單,但發現很多問這類問題的都是小白。
其實原來很簡單,就是判斷當前是在微信內建瀏覽器中,然後將預設隱藏的提示層顯示出來。
第一步:判斷微信的UA。
- var ua = navigator.userAgent;
- var isWeixin = !! /MicroMessenger/i.test(ua);
第二步:引入預設隱藏層。
<a href="http://caibaojian.com/test.apk" id="JdownApp">點選下載APP</a> <a href="http://caibaojian.com/test.apk" id="JdownApp2" class="btn-warn">點選下載APP2</a><div class="wxtip" id="JweixinTip"> <span class="wxtip-icon"></span> <p class="wxtip-txt">點選右上角<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;}
第四步:點選按鈕顯示隱藏層,點選隱藏層關閉,總的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);
以上程式碼,你再也不用擔心有多個按鈕了。