美文网首页Javascript
APP下载引导页H5开发

APP下载引导页H5开发

作者: 吖蛋黄 | 来源:发表于2020-09-14 17:45 被阅读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
        }
    }
    

    相关文章

      网友评论

        本文标题:APP下载引导页H5开发

        本文链接:https://www.haomeiwen.com/subject/ykizektx.html