H5及微信中喚起app的解決方案

今天咱們就來講說這個callapp-lib

個人接到的需求大概是這樣的 若是檢測到不是在app裏面用webview打開的頁面就會顯示上面的當即打開按鈕, 

點擊的話會判斷是否在微信中, 若是在微信中打開就會顯示點擊右上角-選擇在safari中打開的圖片, 而後在瀏覽器中直接跳轉打開app, 跳到app對應的頁面

 

首先分析需求, 第一步判斷如今在哪一個端打開的網頁

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是否是在微信, 這個方法不少, 百度上一堆

接下來寫咱們圖一上方飄着的那個組件

<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>
最後一步, 也是最重要的一步, 也是本文今天的重點, 就是喚醒app了

進到這一步, 說明網頁不是在app中打開的, 是在瀏覽器或者微信中, 因此咱們這裏只須要判斷是否是在微信中就行

在微信的話讓他瀏覽器打開, 不在微信的話直接就跳轉, 也就是在這裏使用咱們的callapp-lib來進行跳轉

//導入
$ 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: '填寫應用寶的下載地址',
fallback: '填寫喚端失敗後跳轉的地址。'
}
const callLib = new CallApp(options)

callLib.open({
param: url.param,
path: url.path
})
Options
實例化過程當中，須要傳遞一個 options 對象給類，options 對象各屬性須要嚴格按照下面的格式。

下面全部不是必填的，若是你不須要傳值，就不要寫這個屬性，而不是傳遞一個空字符串或者空對象，callapp-lib 並未對這種狀況進行嚴格的檢測。

 
scheme
類型: object
必填: ✅

用來配置 URL Scheme 所必須的那些字段。

protocol
類型: string
必填: ✅

APP 協議，URL Scheme 的 scheme 字段，就是你要打開的 APP 的標識。

appstore: 類型: string 必填: ✅填寫appstore的下載地址,

yingyongbao: 類型: string 必填: ✅填寫應用寶的下載地址,

fallback: 類型: string 必填: ✅填寫喚端失敗後跳轉的地址

介紹一下什麼是URL Scheme 

咱們來看一下 URL 的組成：[scheme:][//authority][path][?query][#fragment]

就像給服務器資源分配一個 URL，以便咱們去訪問它同樣，咱們一樣也能夠給手機APP分配一個特殊格式的 URL，用來訪問這個APP或者這個APP中的某個功能(來實現通訊)。APP得有一個標識，好讓咱們能夠定位到它，它就是 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 格式：

行爲(應用的某個功能)

            |

scheme://[path][?query]

  |              |

應用標識 功能須要的參數
 

methods
open
喚端功能。接收一個對象做爲參數，該對象支持如下屬性：

path

類型: string 必填: ✅

須要打開的頁面對應的值，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: '填寫應用寶的下載地址',
fallback: '填寫喚端失敗後跳轉的地址。'
}
const callLib = new CallApp(options)

callLib.open({ param: url.param, path: url.path }) }, goDownload() { window.location.href = '沒有自動喚端的話,證實手機裏面沒有app, 點擊頁面上任意一個地方直接跳應用寶下載連接, 微信不會攔截支付寶的連接' } }}</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>