Vue实现APP的H5下载页面实战

❝

我们一般做APP都会提供一个下载界面，方便用户下载产品

本文将介绍相关逻辑，UI就比较随意了！

❞

判断手机系统

使用浏览器头部信息获取关键字

// 是否为苹果系统 手机/电脑/平板
let version = navigator.userAgent.toLowerCase();
let mac = version.indexOf('mac');
let os = version.indexOf('os');
if(mac > 0 && os > 0){
  return true
}
return false

判断网页环境

使用浏览器头部信息获取关键字

// 小写
let ua = navigator.userAgent.toLowerCase()
// 大写
let UA = navigator.userAgent.toUpperCase()
if (ua.match(/MicroMessenger/i) == "micromessenger"){
  // 微信浏览器
  this.isWx = true
}

// 上一步判断的结果
// youid 是 app应用商城的id 个数为id + 数字
if(this.ios){
    window.location.href = 'https://apps.apple.com/cn/app/youid'
    return
}
// this.brand 品牌
if(UA.indexOf('XIAOMI') > 0){
    // 小米
    this.brand = 'XiaoMi'
}

if(UA.indexOf('HUAWEI') > 0){
    // 华为
    this.brand = 'Huawei'
}

// 更多品牌
...

获取最新版本信息

// 获取最新的版本信息
this.loading = true

const res = await axios.post(latestVerson,{
    os: this.ios ? 'iOS' : 'Android'
})
this.loading = false
if(res.code === 200){
  // 版本号
  this.versoinInfo.versoin = res.data.versoin
  // 下载地址
  this.versoinInfo.url = res.data.url
  // 创建时间
  this.versoinInfo.createTime = res.data.createTime
}

界面

<template>
<div>
  <div class="logo">
    <!-- logo图片 --> 
    <img src="../assets/img/logo.png" alt="">
  </div>
  <!-- APP名称 --> 
  <div class="title">我的APP</div>
  <!-- 版本号 --> 
  <div class="desc" v-if="!loading && versoinInfo.versoin">
      版本:{{versoinInfo.versoin}}
  </div>
   <!-- 更新时间 --> 
  <div v-if="!loading" class="desc">更新时间:{{versionInfo.createTime}}</div>
  <!-- 下载按钮 --> 
  <div v-if="!loading && !isLoaded" class="btnBox">
        <template v-if="versoinInfo.url">
            <a v-if="ios" class="install" :href="'itms-services://?action=download-manifest&&url=' + versionInfo.url">IOS安装</a>
            <a v-else class="install" href="javascript:void(0);" @click="install">Android安装</a>
            <a v-if="brand " href="javascript:void(0);" @click="goMarket">应用商店下载</a>
        </template>
   </div>
  <!-- 下载处理 --> 
  <div class="loaded" v-if="ios && !isLoaded">刷新浏览器跳转APP STORE下载</div>
  <div class="loaded" v-if="ios && isLoaded">请返回桌面查看下载进度</div>
  <div class="loaded" v-if="!ios && isLoaded">请在浏览器中查看下载进度</div>
  <!-- 微信浏览器处理 --> 
  <div v-if="isWx" class="cover">
        <img src="../assets/img/arrow.png" alt="">
        <div class="textBox">
            <label for="">请点击右上角选择</label>
            <label for="">在浏览器中打开</label>
        </div>
  </div>
</div>
  
</template>

普通安装

使用iframe直接下载安装包上述的install方法

var src = this.versionInfo.url;
var iframe = document.createElement('iframe');
iframe.style.display = 'none';
iframe.src = "javascript: '<script>location.href="" + src + ""</script>'";
document.getElementsByTagName('body')[0].appendChild(iframe);
window.setTimeout(function(){
  this.isLoaded = true
}, 5000)

跳转应用市场安装

使用iframe直接下载安装包上述的goMarket方法


// data数据
// 包名
packge: 'com.xxx.xxx'
// scheme列表
scheme: {
    XiaoMi: 'mimarket://details?id=',
    Huawei: 'market://details?id='
}
// 跳转方法
window.open(this.scheme[this.brand] + this.packge)