[TOC] #### 1. 前言 ---- 在很多 APP 中都有分享 APP 的功能，這個(gè)功能是分享出去一個(gè) h5 頁面，在 h5 頁面中跳轉(zhuǎn)到蘋果的 AppStore，而安卓手機(jī)則是提示下載一個(gè) apk 安裝包文件，而在微信瀏覽器中不支持跳轉(zhuǎn)和下載，需要引導(dǎo)用戶使用手機(jī)瀏覽器打開這個(gè) h5 頁面，本文就是實(shí)現(xiàn)這個(gè)功能。因?yàn)檫@個(gè)功能使用比較頻繁，故在此記錄一下，方便以后快速使用。 分享 APP 的 h5 頁面如下所示：  #### 2. 代碼示例 ---- 如果 h5 頁面是使用手機(jī)瀏覽器打開的，點(diǎn)擊 **下載APP** 可以進(jìn)行跳轉(zhuǎn)或下載 如果 h5 頁面是使用微信瀏覽器打開的，點(diǎn)擊 **下載APP** 會(huì)顯示遮罩圖片，提示使用手機(jī)瀏覽器打開 效果圖如下所示：  功能實(shí)現(xiàn)代碼如下所示，可在此基礎(chǔ)上進(jìn)行修改： ```html <style> /* 提示在手機(jī)瀏覽器打開當(dāng)前頁面 */ #cover { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 999; text-align: right; display: none; } #cover img { width: 70%; padding: 10px; } /* 提示在手機(jī)瀏覽器打開當(dāng)前頁面 end */ </style> <!-- 遮罩圖片 --> <div id="cover" onclick="hideCover() "> <img src="https://img.itqaq.com/art/content/cd34cfe7b2ca8aec4f19cf8786c2b2f5.png"> </div> <!-- 下載按鈕 --> <button onclick="download()">下載 APP</button> <script> /* 提示在手機(jī)瀏覽器打開當(dāng)前頁面 */ function hideCover() { document.getElementById('cover').style.display = 'none' } function showCover() { document.getElementById('cover').style.display = 'block' } // APP 安裝包下載地址 const url = 'https://www.baidu.com/xxx.apk' function download() { const ua = navigator.userAgent // 判斷是否是移動(dòng)設(shè)備打開 if (ua.match(/AppleWebKit.*Mobile.*/)) { if (ua.match(/MicroMessenger/i) == "MicroMessenger") { showCover() } else { window.location.href = url } } else { alert('PC瀏覽器不支持下載') } } /* 提示在手機(jī)瀏覽器打開當(dāng)前頁面 end */ </script> ```