H5跳转google市场或者app store
场景1:
在 h5下载页面上,不管用户是否安装过该app,都直接跳转到应用市场(比如google play or app store)。
思路:
这种场景处理比较简单,直接判断判断是android端还是ios端,然后在点击按钮上赋值对应终端的应用市场下载链接就可以了,在微信上打开h5页面时也不用另外处理。跳转之前,系统会默认弹出对话框问是否跳转。
具体实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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按钮,如下:
1 | <span onClick={() =>download(region === 'china' ? APK_CN :APK_OVERSEAS, 'apk' )}></span> |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库