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

最新推荐文章于 2024-07-11 21:22:49 发布

wxy0114

最新推荐文章于 2024-07-11 21:22:49 发布

阅读量4.9k

点赞数

分类专栏：基于vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/wxy0114/article/details/115196655

版权

最近呢，接到一个新需求，在我们负责的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 />在浏览器中打开</