APP下载引导页H5开发

开发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
    }
}
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容