PC端通过扫码实现下载APP

一、生成二维码
1、安装qrcodejs2

npm i qrcodejs2 -S

2、页面中引用

import QRcode from 'qrcodejs2'
...
<div class="app-code">
  <div class="code" id="qrcode" ref="qrcode"></div>
</div>
...
mounted() {
  let url = "http://192.168.0.101:8080/#/download?type=screen"
  new QRcode('qrcode', {
    text: url,
    width: 150,
    height: 150
  })
},

二、扫码下载app
实现通过手机扫描二维码，判断手机的机型和环境来下载android 还是 ios

1、首先路由添加一个下载app的路由

2、接着在download.vue页面中编写核心代码

<template>
    <div>
        <div v-if="tipValue != ''" style="text-align: center;margin-top: 20px;">{{ tipValue }}</div>
        <div class="box" v-if="explorer">
            <img :src="require('@/assets/login_bg.jpg')" style="height:300px;" />
            <el-button type="primary" round style="width: 200px;margin-top: 30px;" @click="onNavigationApp">立即下载</el-button>
        </div>

    </div>
</template>
  
<script>
export default {
    name: "downLoadPage",
    data() {
        return {
            tipValue: '',
            explorer: true
        }
    },
    mounted() {
        if (this.$route.query.type) {
            this.getAndroidOrIos()
        }
    },
    methods: {
        //判断机型
        getAndroidOrIos() {
            const ran = navigator.userAgent
            const isAndroid = ran.indexOf('Android') > -1 || ran.indexOf('Linux') > -1
            const isIos = !!ran.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)
            //判断是否是微信环境
            if (this.isWeixin()) {
                if (isAndroid) {
                    this.tipValue = '请在浏览器中打开'
                } else {
                    try {
                        window.location.replace('http://apps.apple.com/cn/app/id6447748320')
                    } catch (error) { }
                }
            } else {
                if (isAndroid) {
                    this.explorer = true
                }
                if (isIos) {
                    try {
                        window.location.replace('http://apps.apple.com/cn/app/id6447748320')
                    } catch (error) { }
                }

            }
        },

        //判断是否是微信客户端
        isWeixin() {
            var ua = window.navigator.userAgent.toLowerCase()
            if (ua.match(/MicroMessenger/i) == 'micromessenger' || ua.match(/_SQ_/i) == '_sq_') {
                return true
            } else {
                return false
            }
        },

        onNavigationApp() {
            let url = `http://120.195.167.126:28300/kind/upload/app/yiguancha.apk`
            setTimeout(() => {
                window.location.replace(url)
            }, 1500)
        }
    }
}
</script>
  
<style scoped lang="scss">
.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}
</style>