H5跳轉google市場或者app store
阿新 • • 發佈:2022-05-06
場景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)