分享 APP 的 H5 下載頁面

作者：辰風沐陽閱讀：2620 發布時間：2023-03-09 上次更新：2023-03-10

[TOC]

#### 1. 前言
----

在很多 APP 中都有分享 APP 的功能，這個功能是分享出去一個 h5 頁面，在 h5 頁面中跳轉到蘋果的 AppStore，而安卓手機則是提示下載一個 apk 安裝包文件，而在微信瀏覽器中不支持跳轉和下載，需要引導用戶使用手機瀏覽器打開這個 h5 頁面，本文就是實現這個功能。因為這個功能使用比較頻繁，故在此記錄一下，方便以后快速使用。

分享 APP 的 h5 頁面如下所示：

![](https://img.itqaq.com/art/content/031b0e9232ea87a5af16de7d69b364eb.png)

#### 2. 代碼示例
----

如果 h5 頁面是使用手機瀏覽器打開的，點擊 **下載APP** 可以進行跳轉或下載

如果 h5 頁面是使用微信瀏覽器打開的，點擊 **下載APP** 會顯示遮罩圖片，提示使用手機瀏覽器打開

效果圖如下所示：

![](https://img.itqaq.com/art/content/569778a5291a319320ed69d581dcd62e.jpg)

功能實現代碼如下所示，可在此基礎上進行修改：

```html
<style>
    /* 提示在手機瀏覽器打開當前頁面  */
    #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;
    }

/* 提示在手機瀏覽器打開當前頁面 end */
</style>

<div id="cover" onclick="hideCover() ">
    <img src="https://img.itqaq.com/art/content/cd34cfe7b2ca8aec4f19cf8786c2b2f5.png">
</div>

<button onclick="download()">下載 APP</button>

分享 APP 的 H5 下載頁面

最新發布

友情鏈接