微信打开分享链接并且检测是否有APP，若有APP则跳转打开APP，没有则跳转下载界面

 

最近在做项目的时候遇到这么一个需求，就是APP分享链接到微信上，从微信上打开链接，若有APP则跳转APP，若没有则跳转下载页面，在网上找了很多博客，很多内容，做了一下总结贴出来，欢迎大家一起交流分享。

微信打开的时候先提示在浏览器中打开，然后在浏览器中打开点击打开按钮，弹出你要打开的APP，然后如果有则打开，如果没有则安卓跳转下载页面，苹果跳转应用商店下载，

代码如下，可直接粘贴复用：

<template>中代码：

<el-row :gutter="20">
　　<el-col :span="12" class="open">
   　　<el-button class="openZhu" @click="onGo" v-if="whiceBrowser" plain>打开APP</el-button>
   　　<el-button class="openZhu" @click="onSubmit" v-if="!whiceBrowser" plain>打开APP</el-button>
　　</el-col>
　　<el-col :span="12">
   　　<el-button class="el-button zhuce" @click="onRegister">注册</el-button>
　　</el-col>
</el-row>
<div class="app_success" v-if="imgShow">
　　<div class="app_tootip">
　　　　<img :src="src" width="100%"/>
　　</div>
</div>

script中的代码可直接复用：

onGo(){
                this.imgShow = true
            },
            openApp(url,callback){
                let {isAndroid,isIOS,isIOS9} = this.detectVersion()
                if(isAndroid || isIOS){
                    var timeout, t = 1000, hasApp = true;
                    var openScript = setTimeout(function () {
                        if (!hasApp) {
                            callback && callback()
                        }
                        document.body.removeChild(ifr);
                    }, 2000)

                    var t1 = Date.now();
                    var ifr = document.createElement("iframe");
                    ifr.setAttribute('src', url);
                    ifr.setAttribute('style', 'display:none');
                    document.body.appendChild(ifr);

                    timeout = setTimeout(function () {
                        var t2 = Date.now();
                        if (t2 - t1 < t + 100) {
                            hasApp = false;
                        }
                    }, t);
                }

                if(isIOS9){
                    location.href = url;
                    setTimeout(function() {
                        callback && callback()
                    }, 250);
                    setTimeout(function() {
                        location.reload();
                    }, 1000);
                }

            },
            isSure(){
                var browser = {
                    versions: function () {
                        var u = navigator.userAgent, app = navigator.appVersion;
                        return {         //移动终端浏览器版本信息
                            trident: u.indexOf('Trident') > -1, //IE内核
                            presto: u.indexOf('Presto') > -1, //opera内核
                            webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                            gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, //火狐内核
                            mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                            ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                            android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, //android终端或uc浏览器
                            iPhone: u.indexOf('iPhone') > -1, //是否为iPhone或者QQHD浏览器
                            iPad: u.indexOf('iPad') > -1, //是否iPad
                            webApp: u.indexOf('Safari') == -1 //是否web应该程序，没有头部与底部
                        };
                    }(),
                    language: (navigator.browserLanguage || navigator.language).toLowerCase()
                }
                //判断打开地址
                if (browser.versions.mobile) {//判断是否是移动设备打开。browser代码在下面
                    var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
                    if (ua.match(/MicroMessenger/i) == "micromessenger") {
                        //在微信中打开
                        // alert('weixin')
                        this.whiceBrowser = true
                    }else{
                        this.whiceBrowser = false
                    }
                    if (ua.match(/WeiBo/i) == "weibo") {
                        //在新浪微博客户端打开
                    }
                    if (ua.match(/QQ/i) == "qq") {
                        //在QQ空间打开
                        // alert('qq')
                    }
                    if (browser.versions.ios) {
                        //是否在IOS浏览器打开
                        // alert('ios')
                        this.src = require('../../assets/ios.png')
                    }
                    if(browser.versions.android){
                        //是否在安卓浏览器打开
                        // alert('android')
                        this.src = require('../../assets/android.png')
                    }
                } else {
                    //否则就是PC浏览器打开
                }
            },
            onSubmit(){
                this.detectVersion();
                //跳h5
                function goConfirmAddr(){
                    // window.location.href = 'http://xubozhineng.com/a/APPxiazai/'
                    // 获取终端的相关信息
                    var Terminal = {
                        // 辨别移动终端类型
                        platform: function () {
                            // u是用户代理，App是浏览器版本
                            var u = navigator.userAgent, app = navigator.appVersion;
                            return {
                                // 是否android终端或者uc浏览器
                                android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1,
                                // 是否为iPhone或者QQHD浏览器
                                iPhone: u.indexOf('iPhone') > -1,
                                // 是否iPad
                                iPad: u.indexOf('iPad') > -1
                            };
                        }(),
                        // 辨别移动终端的语言：zh-cn、en-us、ko-kr、ja-jp...
                        language: (navigator.browserLanguage || navigator.language).toLowerCase()
                    };
                    // 根据不同的终端，跳转到不同的地址
                    // console.log('Terminal.platform==>>',Terminal.platform)
                    var theUrl = '';
                    if (Terminal.platform.android) {
                        theUrl = 'http://xubozhineng.com/a/APPxiazai/';
                    } else if (Terminal.platform.iPhone) {
                        theUrl = 'https://itunes.apple.com/app/id1478578097';
                    }
                    window.location.href = theUrl;
                }
                // window.onload = function(){
                var url="shenglidongying://com.rhyme.owner/";
                this.openApp(url,goConfirmAddr)
                // }
            },
            detectVersion(){
                let isAndroid,isIOS,isIOS9,version,
                    u = navigator.userAgent,
                    ua = u.toLowerCase();

                if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {   //android终端或者uc浏览器
                    //Android系统
                    isAndroid = true
                }

                if(ua.indexOf("like mac os x") > 0){
                    //ios
                    var regStr_saf = /os [\d._]*/gi ;
                    var verinfo = ua.match(regStr_saf) ;
                    version = (verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,".");
                }
                var version_str = version+"";
                if(version_str != "undefined" && version_str.length >0){
                    version = parseInt(version)
                    if(version>=8){
                        // ios9以上
                        isIOS9 = true
                    }
                    else{
                        isIOS = true
                    }
                }

                return {isAndroid,isIOS,isIOS9}
                this.isAndroid = isAndroid
                this.isIOS = isIOS
                this.isIOS9 = isIOS9
            },

 

 //调用方法
        mounted() {
            this.isSure()
        }

然后就可以啦！