如何判断H5中是否成功调起应用商店

一、H5页面如何打开本地APP

使用scheme协议:直接window.open(schemeUrl),比如:

window.open('market://details?id=xxx') //安卓通用应用市场
window.open('https://apps.apple.com/cn/app/idxxxx') //IOS app store

同样的,也可以打开其他app,

window.open('weixin://xxxxx')

scheme协议的格式:[scheme]://[host]/[path]?[query]

二、如何判断是否成功调起应用商店

如果成功调起,当前页面会变成不可见,可以监听document的visibilitychange事件,如果页面不可见了,就说明成功调起了;如果页面在一段时间内,就可以认为是没有成功调起。

data () {
	return {
		timer:null
	}
}

visibilityChange () {
    if (document.visibilityState === 'hidden') {
      clearTimeout(this.timer)
    }
}

handleJumpToApp () {
	window.open('market://details?id=xxx') //安卓通用应用市场
	this.timer = setTimeout(() => { 
		console.log('调起失败') 
		// 调起失败的处理
	}, 1000)
}

mounted () {
    document.addEventListener('visibilitychange', this.visibilityChange)
}
上一篇:H5唤起APP实践小结


下一篇:[2021 Spring] CS61A Discussion 10: Scheme, Scheme Lists