小辉网络社区致力于优质软件,活动线报,游戏辅助,绿色工具等资源共享,好货不私藏!

微信h5页面中强制跳转下载app实现代码

小辉工作室 JS网页代码

需求:在微信h5页面中下载第三方app —— 安卓, 直接下载apk文件包;iphone,跳转AppStore
分析:微信不支持,在微信中屏蔽了apk文件的下载以及AppStore的跳转(且除非和TX有合作的应用,否则也不支持通过scheme跳转第三方app)
变通方法:
一、借助TX的应用市场 --‘应用宝’:将app上架应用宝,在微信中点击下载按钮(app的应用宝微下载地址),安卓则可跳转应用直接进行下载,iphone则会自动跳转Appstore(需在TX开发平台进行配置)
总结:虽然这种方法可以直接跳出微信并进行下载,但是需要用户在应用宝中下载
二、在微信中生成遮罩层,然后指引用户点击微信中右上角的更多按钮,选择【在浏览器打开】(iphone为【在safari中打开】,下同)
总结:虽然这种方法需要用户多操作一步,但贵在原生且不涉及第三方应用市场,本文主要讲述的是这种方法(且在浏览器中打开后仿应用宝下载效果:安卓直接弹出apk下载框,iphone则直接跳转AppStore,无需用户再一次点击下载按钮)
主要代码如下(H5页面由vue构建):
1、识别手机类型
<style>
/* 判断用户手机为安卓还是iphone */
checkPhone () {
let self = this
let agent = (navigator.userAgent || navigator.vendor || window.opera)
if (agent != null) {
let agentName = agent.toLowerCase()
if (/android/i.test(agentName)) {
self.isAndroid = true
} else if (/iphone/i.test(agentName)) {
self.isIOS = true
}
}
}
</style>
4、浏览器中打开加了hash的url地址,识别hash值,安卓直接弹出apk下载框,iphone则直接跳转AppStore
重中之重:原来的H5页面的url地址后面必须跟上‘#/’, 不然浏览器不会识别hash值,切记、切记、切记
<script>
identityHash () {
if (window.location.hash.includes('download')) {
window.location.hash = 'http://bbs.8gws.com/#/'// 还原hash为空
self.checkPhone()
if (self.isAndroid) {
// 安卓,弹出包下载页面
window.location.href = config.androidDownloadUrl
} else if (self.isIOS) {
// ios,直接跳转Appstore
window.location.href = config.linkToAppstore
} else {
this.$alert({text: ['暂不支持,敬请期待~']})
</script>
代码如下:
Plugins by frpkj.com

温馨提示:如有转载或引用以上内容请将本文链接作为出处标注!百度未收录

免责声明:本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑或手机中彻底删除上述内容。如果您喜欢该程序,请支持正版,购买注册,得到更好的正版服务。侵删请致信E-mail:431228450@qq.com

标签 暂无标签
资源分享
评论列表