栈外h5跳转app,否则跳商城下载
app做端外分享时,用户点击分享页按钮唤起app。若已安装app,则唤起并跳转到app内指定页,否则跳转手机商城进行下载。1 获取端外统跳地址需要找端内开发人员提供,格式大致如下:/*** protocol为统跳协议(每一个app都有特定的protocol)* path为app内页面路径(可以为'')* params为跳转参数(如:id=123&from=web)*/const schem
·
端外在打开h5时,一些情况下需要唤起app。若安装app,则唤起,否则跳转手机商城下载页。
1 获取端外统跳地址
需要找端内开发人员提供,格式大致如下:
/**
* protocol为统跳协议(每一个app都有特定的protocol)
* path为app内页面路径(可以为'')
* params为跳转参数(如:id=123&from=web)
*/
const schemeUrl = `${protocol}://${path}?${params}`
2 获取应用商城地址
const defaultUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=xxx' // 应用宝地址,也可以是app官方下载地址,用作兜底(http协议的地址)
const iosAppStore = 'https://apps.apple.com/cn/app/idxxx' // ios商店地址
function getAndriShop() { // 获取安卓商城地址
let hreff = '';
if (ua.isVivo) {
hreff = 'vivoMarket://details?id=xxx'
} else if (ua.isoppo) {
hreff = 'oppomarket://details?packagename=xxx'
} else if (ua.isHuawei) {
hreff = 'appmarket://details?id=xxx'
} else if (ua.isXiaomi) {
hreff = 'mimarket://details?id=xxx'
} else if (ua.isMeizu) {
hreff = 'mstore://details?id=xxx'
} else {
hreff = YYB
}
function goAppShop() {
if (ua.ios) {
window.location.href = iosAppStore // ios商城
return
}
if (ua.qqbrowser) { // 特殊浏览器处理(商店无法跳转)
window.location.href = YYB // 应用宝
return
}
window.location.href = getAndriAddr() // android商城
setTimeout(function() { // 若商城打开失败,跳转应用宝兜底
window.location.href = YYB // 应用宝
setTimeout(() => {
window.close()
}, 500)
}, 500)
}
3 具体实现
实现原理:
使用window.location跳转app协议地址,并在之后通过setInterval做异步处理。
如果成功唤起app,则会离开当前页,否则??s后清除计时器并打开商城。
最后通过监听visibilitychange(当前页是否可见),??s内若唤起app,即当前页被隐藏,document.hidden=true,此时清除计时器,防止内存泄漏(不再跳商城)。
代码如下:
const jumpOutOpenApp = () => {
Toast.info('链接加载中,请稍候', 3)
const openAppUrl = schemeUrl // 栈外统跳地址
window.location = openAppUrl // 打开app(如果安装)
/**
* 若已经安装,上一步已经完成跳转,后面的代码执行与否不需在意
* 若没有安装,上一步跳转失败,延迟执行后面的代码
*/
const initialTime = new Date()
let counter = 0
let waitTime = 0
const checkOpen = setInterval(() => {
counter++
waitTime = new Date() - initialTime
if (waitTime > 3500) {
clearInterval(checkOpen)
goAppShop()
}
if (counter < 1000) {
return null
}
}, 20)
document.addEventListener('visibilitychange', () => {
const isHidden = document.hidden
if (isHidden) {
clearInterval(checkOpen)
}
})
}
也可以利用一些过渡手段,将唤起app和打开商城分成两步,思路如下:
点击 按钮,跳转一个新的页或者在本页面打开一个弹窗(称之为过渡页),过渡页中可以添加下载按钮供用户手动点击跳转商城下载,过渡页在渲染过程中唤醒app(默认操作,用户无感知),能唤醒就直接跳转app,否则停留在过渡页,这种情况等价于未唤醒app,等待用户手动点击跳转商城。
const ModalDown = () => {
useEffect(() => {
window.location = openAppUrl // 打开app(如果安装)
}, [])
return <div><
xxx
<div onClick={goAppShop}>下载app</div>
/div>
}
更多推荐
已为社区贡献4条内容
所有评论(0)