h5页面添加APP下载引导页实现APP下载

编程知识更新时间:2023-05-02 19:37:17

最近呢，接到一个新需求，在我们负责的H5网页网站添加一个app下载引导页，成功之后来给大家分享一下！
先给大家来看一下ios跟Android微信内点击链接有什么不同：

Android展示显示微信内空白页，点击右上角三个点打开浏览器(展示的图并没有Android端加上遮罩层的效果图,图的比例不太一样啊，哈哈哈，不影响效果)

ios展示直接打开跳转应用商店

首先呢来考虑一下步骤：
第一步呢，是要判断是ios还是Android端，下载链接是不一样的，我这里直接用的a标签：

<a v-if="iosOrAndroid===true" class="download" href="Android下载地址" @click="anzhuo($event)">
  点击下载APP
</a>
<a v-if="iosOrAndroid===false" class="download" href="ios下载地址" @click="ios($event)">
  点击下载APP2
</a>
<div class="bd_drop" ref="backdrop" v-show="show" @click="bdrop">
  <span class="tip"></span>
  <p class="tip_text">点击右上角选择<br />在浏览器中打开</p>
</div>
.download {position: absolute;display: block;top: 85%;height: 100px;width: 60%;background: red;opacity: .3;left: 20%;}
.bd_drop{background: rgba(0, 0, 0, 0.8);text-align: center;position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 998;display: none;}
.tip{width: 69px;height: 64px;position: absolute;color: #fff;right: 50px;top: 30px;background: url("../../../image/app/top_right.png") no-repeat center center;background-size: 100% 100%;}
.tip_text {font-style: italic;color: #fff;font-size: 26px;line-height: 2;position: absolute;width: 40%;height: 150px;padding-top: 26px;box-sizing: border-box;left: 30%;border: 2px #fff dashed;border-radius: 75px;top:40%;transform: translateY(-50%);}

通过这上下两个代码块大家也都明白了，Android和ios链接是通过一个变量来控制是否显示的，进入页面要先判断是Android手机还是ios手机，呐，就是下面

// 判断ios Or  安卓
    isIosOrAndroid() {
        var u = navigator.userAgent;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        // alert('是否是Android：'+isAndroid);
        // alert('是否是iOS：'+isiOS);
        if(isiOS){
          this.iosOrAndroid=false
        }else{
          this.weixinTip()
          this.iosOrAndroid=true
        }
    },

第二部呢，要判断是否是微信打开，如果是微信打开的话，可以加一个遮罩层来提示一下点击右上角三个点在浏览器打开

// 判断是否微信打开
    weixinTip() {
      var ua = navigator.userAgent
      var isWeixin = !!/MicroMessenger/i.test(ua)
      isWeixin?this.show=true:this.show=false
    }

点击链接的时候显示遮罩层（遮罩层只在Android手机微信打开才显示）

    // 安卓下载
    anzhuo(e){
      if(this.show===true){
        window.event ? (window.event.returnValue = false) : e.preventDefault();
        this.show===true?this.$refs.backdrop.style.display = "block":this.$refs.backdrop.style.display = "none"
      }
    },
    // ios下载
    ios(){
      // window.event ? (window.event.returnValue = false) : e.preventDefault();
      this.$refs.backdrop.style.display = "none"
    },
    // 点击遮罩层关闭
    bdrop(){
      this.$refs.backdrop.style.display = "none"
    }