分享 APP 的 H5 下载页面

作者：辰风沐阳阅读：2457 发布时间：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 下载页面

最新发布

友情链接