vue实现app下载页面，微信提示，自动识别安卓IOS

       vue实现app下载引导页，目标：手机微信打开时提示用户从浏览器打开。手机浏览器访问时，点击下载按钮自动识别安卓IOS跳转对应下载页面。

       例子使用的是vue+脚手架（vue-cli）搭建，具体流程网上例子很多，文章不做赘述。IDE使用的是vscode。

第一步、创建项目：

       笔者使用的是Windows系统，在doc命令中输入vue init webpack app_download 创建项目。app_download为项目名称。

第二步、项目配置：

       

       图片中是项目目录结构，dist是打包出来的文件，创建时没有。

       项目构建后，在index.html添加标签<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />。这个标签如果是经常开放web app会比较熟悉，不是文章重点，不做过多描述。

        在vscode中打开项目，打开src文件夹。demo只有一个页面，使用默认生成的index.vue即可。

第三步、编码：

      打开index.vue。创建两个div，上下布局，第一个div默认不显示，只有在微信浏览器中才显示，目的是提示用户用其它浏览器打开。第二个div显示下载页面，有一个按钮跳转到下载相关页面。

      代码：

<template>

<div iud="body">

<div id="wx" v-show="show_wx">

<img :src="wx" id="wx_img"></img>

</div>

<div>

<img :src="btn" id="btn_img" @click="download()"></img>

</div>

</div>

</template>

<script>

export default {

data() {

return {

type : "android",

show_wx : false,

};

},

created() {

let ua = navigator.userAgent.toLowerCase();

if (/iphone|ipad|ipod/.test(ua)) {

this.type = "ios";

} else if (/android/.test(ua)) {

this.type = "android";

}

if(isWeixinBrowser()){

this.show_wx = true;

}

function isWeixinBrowser() {

return (/micromessenger/.test(ua)) ? true : false;

}

},

methods: {

download() {

const that = this;

if(that.type == 'android') {

window.location.href = '安卓下载地址';

} else {

window.location.href = 'IOS下载地址';

}

},

}

};

</script>