微信開啟分享連結並且檢測是否有APP，若有APP則跳轉開啟APP，沒有則跳轉下載介面
阿新 • • 發佈：2020-12-05
最近在做專案的時候遇到這麼一個需求，就是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() }
然後就可以啦！
onGo(){ this.imgShow=true }, openApp(url,callback){ let{isAndroid,isIOS,isIOS9}=this.detectVersion() if(isAndroid||isIOS){ vartimeout,t=1000,hasApp=true; varopenScript=setTimeout(function(){ if(!hasApp){ callback&&callback() } document.body.removeChild(ifr); },2000)vart1=Date.now(); varifr=document.createElement("iframe"); ifr.setAttribute('src',url); ifr.setAttribute('style','display:none'); document.body.appendChild(ifr);
timeout=setTimeout(function(){ vart2=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(){ varbrowser={ versions:function(){ varu=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.+MacOSX/),//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程式碼在下面 varua=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 functiongoConfirmAddr(){ //window.location.href='http://xubozhineng.com/a/APPxiazai/' //獲取終端的相關資訊 varTerminal={ //辨別移動終端型別 platform:function(){ //u是使用者代理，App是瀏覽器版本 varu=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) vartheUrl=''; if(Terminal.platform.android){ theUrl='http://xubozhineng.com/a/APPxiazai/'; }elseif(Terminal.platform.iPhone){ theUrl='https://itunes.apple.com/app/id1478578097'; } window.location.href=theUrl; } //window.onload=function(){ varurl="shenglidongying://com.rhyme.owner/"; this.openApp(url,goConfirmAddr) //} }, detectVersion(){ letisAndroid,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("likemacosx")>0){ //ios varregStr_saf=/os[\d._]*/gi; varverinfo=ua.match(regStr_saf); version=(verinfo+"").replace(/[^0-9|_.]/ig,"").replace(/_/ig,"."); } varversion_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 },