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
    }
}