微信打開分享鏈接並且檢測是否有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()
        }

然后就可以啦！