The front-end jumps to the corresponding market to download the app according to the model (dry information)

If it can be achieved, remember to like and share, thank you~

1.Description of requirements

In the H5 interface, the user clicks to download, determines the model, and is directed to the respective app store.

2.Usage scenarios

Let’s take a look at the renderings first:

Note: After clicking to download, there needs to be a guide mask image:

Because if it is not opened from the browser, it needs to be booted again, such as opening from WeChat~

3. Page layout

   <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 logic processing

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

If it can be achieved, remember to like and share, thank you~