开发APP下载引导页,情况说明:
1.APP下载链接由后台返回
2.iOS版本打开到AppStore下载
3.安卓版本链接有可能是安装包apk,也有可能是应用宝下载地址
4.考虑环境因素:安卓端、iOS端、PC端、微信浏览器
一、界面
安卓端只显示安卓版本的下载按钮,iOS端只显示iOS版本的下载按钮,PC端上两个按钮都显示。
UI界面
二、流程图
把我的思路画成流程图:
App下载引导页流程图
三、关键代码
判断H5当前运行环境,是Android还是iOS?是否在微信里面?安卓下载的链接是来自应用宝还是安装包apk?
let u = navigator.userAgent
// 是否是Android终端
this.isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1 // Android终端
// 是否是ios终端
this.isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
// 是否在微信里面
if (u.toLowerCase().match(/MicroMessenger/i) == 'micromessenger') {
this.isInWechat = true
}
if (this.isAndroid && this.isInWechat) {
// 是否是应用宝链接
if (this.android_url.startsWith('https://android.myapp.com')) {
// 是应用宝链接,可以直接下载,不需弹出提示在浏览器打开
this.needShowMask = false
} else {
this.needShowMask = true
}
}
网友评论