H5跳转google市场或者app store

场景1：

在 h5下载页面上，不管用户是否安装过该app，都直接跳转到应用市场(比如google play or app store）。

思路：
这种场景处理比较简单，直接判断判断是android端还是ios端，然后在点击按钮上赋值对应终端的应用市场下载链接就可以了，在微信上打开h5页面时也不用另外处理。跳转之前，系统会默认弹出对话框问是否跳转。

具体实现：

const { isAndroid, isIOS } = useDetect()//此时的isAndroid兼容性不是特别齐全，个别手机还需通过添加额外正则，此处不做展开
useEffect(() => {
     if (isIOS) {
            if (typeof hidden == 'undefined' || hidden == false) {
                if (region === 'china') {
                    goLinks(APP_IOS_CN, 'ios')
                } else {
                    goLinks(APP_IOS, 'ios')
                }
            }
        } else {
            if (typeof hidden == 'undefined' || hidden == false) {
                if (region === 'china') {
                    goLinks(APK_CN, 'apk')
                } else {
                    goLinks(APP_ANDROID, 'googleplay')
                }
            }
        }
},[])

　　

goLinks()封装如下：

  const goLinks = (link: string, type: string, isClick: boolean = false) => {
        //埋点
        if (process.env.NODE_ENV === 'production') {
            let startTime = Math.ceil(new Date().getTime() / 1000) //单位秒
            if (isClick) {
                pageClick({
                    buttonName: type,
                    language: locale,
                    eventCode: 'web_app_qr_download_click',
                    redirectPop: '',
                    version: region === 'china' ? 'ver_cn' : 'ver_intl',
                })
            } else {
                pageView({
                    duration: startTime,
                    language: locale,
                    eventCode: 'web_app_qr_download_pageview',
                    url: window.location.pathname, //当前page的url
                    urlVisit: 1,
                    version: region === 'china' ? 'ver_cn' : 'ver_intl',
                    os: isIOS ? 'ios' : 'android',
                })
            }
        }
        window.location.href = link //跳转对于应用市场链接
    }

调用：
例如我们再 h5 页面上点击一个唤醒app按钮，如下：

 <span  onClick={() =>download(region === 'china' ? APK_CN :APK_OVERSEAS, 'apk')}></span>　

 

 简单的一个小笔记，后续还有Scheme协议直接打开app，不断更新中(o^^o)