Javascript

APP下载引导页H5开发

2020-09-14  本文已影响0人  吖蛋黄

开发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
    }
}
上一篇下一篇

猜你喜欢

热点阅读