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()封裝如下:

 1   const goLinks = (link: string, type: string, isClick: boolean = false) => {
 2         //埋點
 3         if (process.env.NODE_ENV === 'production') {
 4             let startTime = Math.ceil(new Date().getTime() / 1000) //單位秒
 5             if (isClick) {
 6                 pageClick({
 7                     buttonName: type,
 8                     language: locale,
 9                     eventCode: 'web_app_qr_download_click',
10                     redirectPop: '',
11                     version: region === 'china' ? 'ver_cn' : 'ver_intl',
12                 })
13             } else {
14                 pageView({
15                     duration: startTime,
16                     language: locale,
17                     eventCode: 'web_app_qr_download_pageview',
18                     url: window.location.pathname, //當前page的url
19                     urlVisit: 1,
20                     version: region === 'china' ? 'ver_cn' : 'ver_intl',
21                     os: isIOS ? 'ios' : 'android',
22                 })
23             }
24         }
25         window.location.href = link //跳轉對於應用市場鏈接
26     }

調用:
例如我們再 h5 頁面上點擊一個喚醒app按鈕,如下:

 <span  onClick={() =>download(region === 'china' ? APK_CN :APK_OVERSEAS, 'apk')}></span> 
 
 簡單的一個小筆記,後續還有Scheme協議直接打開app,不斷更新中(o^^o)
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章