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

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 '
        }
}
复制

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