最近遇到一個(gè)需求：點(diǎn)擊一個(gè)按鈕蹋盆，如果本機(jī)裝有則喚起app傀缩，沒有的話則跳下載頁漆魔。
剛一接到需求坷檩，覺得很熟悉，實(shí)際上這個(gè)功能也確實(shí)很常見, 尤其是在微信里面更是常見改抡，嘗試著自己寫矢炼，但是卻發(fā)現(xiàn)總是很難做到100%的完美。主要還是微信單方面修改了底層, 禁止非騰訊系軟件通過H5直接跳轉(zhuǎn)app
那么我們就需要自己想辦法了
作為一個(gè)剛?cè)肭岸说牟穗u, 自己寫當(dāng)然是寫不出來的了, 所以就用了別人寫好的現(xiàn)成的輪子callapp-lib
不得不說確實(shí)挺友好的, 它能在大部分的環(huán)境中成功喚端雀摘，而且炒雞簡單啊裸删，拿過去就可以用啊，還支持很多擴(kuò)展功能
今天我們就來說說這個(gè)callapp-lib
我的接到的需求大概是這樣的 如果檢測到不是在app里面用webview打開的頁面就會(huì)顯示上面的立即打開按鈕,
點(diǎn)擊的話會(huì)判斷是否在微信中, 如果在微信中打開就會(huì)顯示點(diǎn)擊右上角-選擇在safari中打開的圖片, 然后在瀏覽器中直接跳轉(zhuǎn)打開app, 跳到app對應(yīng)的頁面
首先分析需求, 第一步判斷現(xiàn)在在哪個(gè)端打開的網(wǎng)頁
export default function(context) {
if (process.server) {
let ua = context.req.userAgent
ua.isWechat = Boolean(ua.source.toLowerCase().match(/MicroMessenger/i))
ua.isInApp =
(context.query && context.query.openinapp !== undefined) || context.req.headers['x-request-deviceid']
ua.isWechatMini = context.query && context.query.wechatmin === '1'
ua.device = {
id: context.req.headers['x-request-deviceid'] || context.req.cookies.get('koa:sess') || '',
info:
context.req.headers['x-request-device'] ||
JSON.stringify({
platform: 'web',
client: 'arcard-portal',
userAgent: context.req.headers['user-agent']
})
}
context.store.commit('SET_USERAGENT', ua)
}
}
由于我用的是nuxt框架, 所以直接在中間件里面搞的, 判斷是不是在app是不是在微信, 這個(gè)方法很多, 百度上一堆
接下來寫我們圖一上方飄著的那個(gè)組件
<template>
<div class="quick-open-app-container">
<div class="logo"><img src="~/assets/img/arlogo.png" alt="logo" /></div>
<div class="info">
<div class="title">{{ $t('layout.name') }}</div>
<div class="content">{{ $t('layout.info') }}</div>
</div>
<van-button class="open-app" size="small" @click="open">{{ $t('layout.openapp') }}</van-button>
</div>
</template>
<script>
export default {
props: {
params: {
type: Object,
default: () => ({
path: '',
param: {}
})
}
},
computed: {
userAgent() {
return this.$store.getters.userAgent
}
},
methods: {
open() {
let params = this.params
this.$router.push({
path: '/' + this.$route.params.lang + '/callapp',
query: { path: params.path, param: params.param }
})
}
}
}
</script>
<style lang="stylus">
@import '~assets/css/design'
.quick-open-app-container
height $openapp-height
display flex
background-color #eee
justify-content center
align-items center
.logo
img
width design(80)
height design(80)
margin-left design(20)
margin-top design(10)
.info
flex 1
margin-left design(20)
.title
font-size design(26)
font-weight 700
color #333
.content
font-size design(24)
color #666
.open-app
background-color $button-blue
color $white
margin-right design(20)
</style>
最后一步, 也是最重要的一步, 也是本文今天的重點(diǎn), 就是喚醒a(bǔ)pp了
進(jìn)到這一步, 說明網(wǎng)頁不是在app中打開的, 是在瀏覽器或者微信中, 所以我們這里只需要判斷是不是在微信中就行
在微信的話讓他瀏覽器打開, 不在微信的話直接就跳轉(zhuǎn), 也就是在這里使用我們的callapp-lib來進(jìn)行跳轉(zhuǎn)
//導(dǎo)入
$ npm install --save callapp-lib
//使用
const CallApp = require('callapp-lib');
or
import CallApp from 'callapp-lib';
下面介紹一下必填的屬性
const options = {
scheme: {
protocol: 'kccatalog'
},
intent: {
package: '',
scheme: ''
},
appstore: '填寫appstore的下載地址',
yingyongbao: '填寫應(yīng)用寶的下載地址',
fallback: '填寫喚端失敗后跳轉(zhuǎn)的地址阵赠。'
}
const callLib = new CallApp(options)
callLib.open({
param: url.param,
path: url.path
})
Options
實(shí)例化過程中，需要傳遞一個(gè) options 對象給類肌稻，options 對象各屬性需要嚴(yán)格按照下面的格式清蚀。
下面所有不是必填的，如果你不需要傳值爹谭，就不要寫這個(gè)屬性枷邪，而不是傳遞一個(gè)空字符串或者空對象，callapp-lib 并未對這種情況進(jìn)行嚴(yán)格的檢測诺凡。
-
scheme
類型:
object
必填: ?用來配置 URL Scheme 所必須的那些字段东揣。
-
protocol
類型:
string
必填: ?
APP 協(xié)議践惑，URL Scheme 的 scheme 字段，就是你要打開的 APP 的標(biāo)識嘶卧。
appstore: 類型: string 必填: ?填寫appstore的下載地址,
yingyongbao: 類型: string 必填: ?填寫應(yīng)用寶的下載地址,
fallback: 類型: string 必填: ?填寫喚端失敗后跳轉(zhuǎn)的地址
介紹一下什么是URL Scheme
我們來看一下 URL 的組成：[scheme:][//authority][path][?query][#fragment]
就像給服務(wù)器資源分配一個(gè) URL尔觉，以便我們?nèi)ピL問它一樣，我們同樣也可以給手機(jī)APP分配一個(gè)特殊格式的 URL芥吟，用來訪問這個(gè)APP或者這個(gè)APP中的某個(gè)功能(來實(shí)現(xiàn)通信)侦铜。APP得有一個(gè)標(biāo)識，好讓我們可以定位到它钟鸵，它就是 URL 的 Scheme 部分钉稍。我們拿 https://www.baidu.com 來舉例，scheme 自然就是 https 了棺耍。
常用APP的 URL Scheme
APP 微信 支付寶 淘寶 微博 QQ 知乎 短信
URL Scheme weixin:// alipay:// taobao:// sinaweibo:// mqq:// zhihu:// sms://
URL Scheme 語法
上面表格中都是最簡單的用于打開 APP 的 URL Scheme贡未，下面才是我們常用的 URL Scheme 格式：
行為(應(yīng)用的某個(gè)功能)
|
scheme://[path][?query]
| |
應(yīng)用標(biāo)識 功能需要的參數(shù)
methods
open
喚端功能。接收一個(gè)對象作為參數(shù)蒙袍，該對象支持以下屬性：
path
類型: string 必填: ?
需要打開的頁面對應(yīng)的值羞秤，URL Scheme 中的 path 部分
只想要直接打開 app ，不需要打開特定頁面左敌，path 傳空字符串 '' 就可以瘾蛋。
其它非必填的可以去github上看
<template>
<div @click="goDownload">
<img class="bgImg" src="~/assets/img/bg.png" alt="" />
<img v-if="userAgent.isWechat" class="chickImg" src="~/assets/img/chick.png" alt="" />
</div>
</template>
<script>
import CallApp from 'callapp-lib'
export default {
computed: {
userAgent() {
return this.$store.getters.userAgent
}
},
mounted() {
if (!this.userAgent.isWechat) {
this.openApp(this.$route.query)
}
},
methods: {
openApp(url) {
const options = {
scheme: {
protocol: 'kccatalog'
},
intent: {
package: '',
scheme: ''
},
appstore: '填寫appstore的下載地址',
yingyongbao: '填寫應(yīng)用寶的下載地址',
fallback: '填寫喚端失敗后跳轉(zhuǎn)的地址媚赖。'
}
const callLib = new CallApp(options)
callLib.open({
param: url.param,
path: url.path
})
},
goDownload() {
window.location.href = '沒有自動(dòng)喚端的話,證明手機(jī)里面沒有app, 點(diǎn)擊頁面上任意一個(gè)地方直接跳應(yīng)用寶下載鏈接, 微信不會(huì)攔截支付寶的鏈接'
}
}
}
</script>
<style lang="stylus">
.bgImg
position absolute
width 100%
height 100%
display block
.chickImg
width 235px
height 175px
position absolute
top 20.5px
right 26.5px
</style>
作者：Huxy_0822
來源：CSDN
原文：https://blog.csdn.net/qq_40132887/article/details/86736322
版權(quán)聲明：本文為博主原創(chuàng)文章蔚万，轉(zhuǎn)載請附上博文鏈接！
