vue 二维码判断手机登录是哪个操作系统

最近公司需要我做一个vue 二维码验证手机啥操作系统给与用户扫一下二维码直接给用户进行下载对应操作系统的软件(ios和安卓)

废话不多说直接上代码

<template>
    
</template>

<script>
    export default {
        name: "downloadAPP",
        data(){
            return{
                version:{
                    trident: '',
                    presto: '',
                    webKit: '',
                    gecko: '',
                    mobile: '',
                    ios: '',
                    android: '',
                    iPhone: '',
                    iPad: '',
                    webApp: '',
                }
            }
        },
        mounted() {
            this.getVersion()
        },
        methods:{
            getVersion(){
                var u = navigator.userAgent, app = navigator.appVersion;
                this.version.trident = u.indexOf('Trident') > -1; //IE内核;
                this.version.trident= u.indexOf('Trident') > -1; //IE内核
                this.version.presto= u.indexOf('Presto') > -1; //opera内核
                this.version.webKit= u.indexOf('AppleWebKit') > -1; //苹果、谷歌内核
                this.version.gecko= u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1; //火狐内核
                this.version.mobile= !!u.match(/AppleWebKit.*Mobile.*/) || !!u.match(/AppleWebKit/); //是否为移动终端
                this.version.ios= !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
                this.version.android= u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器
                this.version.iPhone= u.indexOf('iPhone') > -1 || u.indexOf('Mac') > -1; //是否为iPhone或者QQHD浏览器
                this.version.iPad= u.indexOf('iPad') > -1; //是否iPad
                this.version.webApp= u.indexOf('Safari') == -1; //是否web应该程序,没有头部与底部
                console.log('11111111111111111111111111111')
                if (this.version.ios || this.version.iPhone || this.version.iPad) {
                    window.location = "这里放上你ios安装包地址"; 
                } else if (this.version.android) {
                     window.location = "   这里放上你安卓安装包地址 "; 
                }
            },
    
        }
    }
</script>

<style scoped>

</style>

 

posted @ 2020-12-02 11:33  飞力飞思  阅读(218)  评论(0编辑  收藏  举报