您好,登錄后才能下訂單哦!
這篇文章主要為大家展示了“微信開(kāi)發(fā)中如何實(shí)現(xiàn)提示在瀏覽器打開(kāi)的效果”,內(nèi)容簡(jiǎn)而易懂,條理清晰,希望能夠幫助大家解決疑惑,下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“微信開(kāi)發(fā)中如何實(shí)現(xiàn)提示在瀏覽器打開(kāi)的效果”這篇文章吧。
概述
大體思路是這樣的:先建一個(gè)蒙版,蒙版放上提示的信息,然后寫(xiě)一個(gè)js,在頁(yè)面打開(kāi)的時(shí)候判斷是不是用微信自帶的瀏覽器打開(kāi)的,如果是就打開(kāi)蒙版,提示用瀏覽器打開(kāi)
.基本頁(yè)面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>APP下載</title> <style type="text/css"> td { line-height: 50px; font-size: 40px; } </style> </head> <body > <div align="center" > <table> <tr> <td valign="middle"> <a href="community.apk" rel="external nofollow" id="JdownApp">安卓下載</a> </td> </tr> <tr> <td valign="middle"> <a href="community.ipa" rel="external nofollow" id="JdownApp2" class="btn-warn">蘋(píng)果下載</a> </td> </tr> </table> </div> </body> </html>
添加蒙版
<!--引入遮蔽層--> <div id="Mask" > </div>
//蒙版樣式 #Mask { position: absolute; top: 0; left: 0; display: none; background-image: url(img/tweixinip.jpg); background-size: cover; width: 100%; height: 100%; z-index: 1000; } .model-content { width: 100%; height: 100%; text-align: center; background: #ffffff; border-radius: 6px; margin: 100px auto; line-height: 30px; z-index: 10001; }
添加js
<script type="text/javascript"> //判斷是否在微信中打開(kāi) var ua = navigator.userAgent; var isWeixin = !!/MicroMessenger/i.test(ua); //如果使用的是微信自帶瀏覽器,就打開(kāi)蒙版 if(isWeixin) { var SHOW = 0; document.getElementById('Mask').style.display = ++SHOW % 2 == 1 ? 'block' : 'none'; } </script>
最終效果
當(dāng)使用瀏覽器打開(kāi)時(shí)展示原始頁(yè)面
當(dāng)使用微信打開(kāi)時(shí)展示蒙版
以上是“微信開(kāi)發(fā)中如何實(shí)現(xiàn)提示在瀏覽器打開(kāi)的效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。