前端根据机型跳转对应市场下载app（干货）

最新推荐文章于 2024-06-05 09:19:48 发布

前端加油站

最新推荐文章于 2024-06-05 09:19:48 发布

阅读量572

点赞数

分类专栏：工具类 react 文章标签：前端

本文链接：https://blog.csdn.net/Gas_station/article/details/131331662

版权

工具类同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

react

6 篇文章 0 订阅

订阅专栏

该文章描述了一个H5界面的实现，当用户点击下载按钮时，系统会判断用户设备类型，然后引导用户去相应的应用商店（如iOS的AppStore或Android的GooglePlay）。如果从非浏览器环境（如微信）打开，则会显示引导用户用浏览器打开的提示。代码示例中展示了如何使用JavaScript进行浏览器检测和处理下载逻辑。

摘要由CSDN通过智能技术生成

如果可以实现记得点赞分享，谢谢老铁～

1.需求描述

H5界面，通过用户点击下载，判断机型，引导到各自的应用商店。

2.使用场景

先看个效果图：
在这里插入图片描述

注意：点击下载后这里需要有一个引导遮罩图：

在这里插入图片描述
因为如果不是从浏览器打开的，就需要再次引导，好比从微信打开~

3.页面布局

   <div>
   	 <!--这是一张下载页的图片-->
      <img src="/image/downloadZh.png" alt="download" />
      <div>
        <button type="button" onClick={downloadApp}>立即下载</button>
      </div>
      <div isShow={isShow}>
      	 <!--这是一张引导到浏览器打开的图片-->
        <img src="/image/tipZh.png" alt="tip" />
      </div>
    </div>

4.js 逻辑处理

const [isShow, setIsShow] = useState(false)
const downloadApp = () => {
        /*  
         * 智能机浏览器版本信息:  
         *  
         */
        const nav: any = window.navigator
        const browser = {
            versions: function () {
                const userAgent = window.navigator.userAgent
                return { //移动终端浏览器版本信息  
                    trident: userAgent.indexOf('Trident') > -1, //IE内核  
                    presto: userAgent.indexOf('Presto') > -1, //opera内核  
                    webKit: userAgent.indexOf('AppleWebKit') > -1, //苹果、谷歌内核  
                    gecko: userAgent.indexOf('Gecko') > -1 && userAgent.indexOf('KHTML') == -1, //火狐内核  
                    mobile: !!userAgent.match(/AppleWebKit.*Mobile.*/) || !!userAgent.match(/AppleWebKit/), //是否为移动终端  
                    ios: !!userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端  
                    android: userAgent.indexOf('Android') > -1 || userAgent.indexOf('Linux') > -1, //android终端或者uc浏览器  
                    iPhone: userAgent.indexOf('iPhone') > -1 || userAgent.indexOf('Mac') > -1, //是否为iPhone或者QQHD浏览器  
                    iPad: userAgent.indexOf('iPad') > -1, //是否iPad  
                    webApp: userAgent.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部 
                    weixin: userAgent.match(/MicroMessenger/i) == 'MicroMessenger',
                    alipay: userAgent.match(/AlipayClient/i) == 'AlipayClient'
                };
            }()
        }
        if (browser.versions.weixin) {
            setIsShow(true)
            return false;
        }
        var platformType = "";
        if (browser.versions.ios || browser.versions.iPhone || browser.versions.iPad) {
            platformType = "ios";
            window.location.href = 'https://apps.apple.com/app/idxxxxxx'
        } else {
            platformType = "android";
            window.location.href = 'https://play.google.com/store/apps/details?id=xxx.xxx.xxx '
        }
}