喜大普奔,微信終于支持外網(wǎng)打開小程序啦!

前言

千呼萬喚始出來，微信小程序終于支持以URL Scheme的形式從外部喚起了。

long long ago~ 我們只能在微信內(nèi)的網(wǎng)頁中使用微信開發(fā)標(biāo)簽-小程序跳轉(zhuǎn)按鈕 打開小程序，只有這樣一種單一的場(chǎng)景。

而在實(shí)際的業(yè)務(wù)中，我們希望在給用戶發(fā)送的營銷短信、郵件或其他渠道如APP打開小程序，以快速獲取用戶流量，完成引流、導(dǎo)購等目的。

他來啦，他來啦，微信小程序悄咪咪的上線了新功能：支持URL Scheme打開小程序了。

新品上線

URL Scheme打開小程序新品上線，速來嘗鮮。

可以隨著胡哥的角度為你一一闡述、總結(jié)分析，也可以直接點(diǎn)擊官方文檔傳送門查看官方文檔呦~

我們首先來看下目前微信官方提供的兩種打開微信小程序的方式以及相關(guān)適用場(chǎng)景。

打開方式	適用場(chǎng)景	場(chǎng)景值	使用方式	備注
URL Scheme	短信、郵件、微信外網(wǎng)頁打開小程序	1065	location.href = 'weixin://dl/business/?t= *TICKET*'	TICKET由服務(wù)端接口返回
	微信內(nèi)網(wǎng)頁	1167	頁面配置標(biāo)簽	需配置JS接口域名或云開發(fā)靜態(tài)網(wǎng)站托管綁定的域名下網(wǎng)頁

一定要注意區(qū)分兩種方式的適用場(chǎng)景：URL scheme是適用于微信外網(wǎng)頁，是適用于微信內(nèi)的。

小程序URL Scheme的獲取

小程序的URL Scheme的結(jié)構(gòu)為 weixin://dl/business/?t= *TICKET*，其中TICKET由服務(wù)端接口返回的。服務(wù)端接口區(qū)分兩種形式：HTTPS調(diào)用和云開發(fā)調(diào)用。

一、HTTPS調(diào)用

1. 獲取ACCESS_TOKEN

   請(qǐng)求地址：

   GET?https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET
   

   對(duì)應(yīng)的APPID和APPSECRET換成自己對(duì)應(yīng)的小程序即可。

   返回的數(shù)據(jù)結(jié)構(gòu)如下：

   {
   ?"access_token":?"ACCESS_TOKEN",
   ?"expires_in":?7200
   }
   

2. 獲取URL Scheme

   請(qǐng)求地址：

   POST?https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN
   

   請(qǐng)求參數(shù)：

   屬性	類型	默認(rèn)值	必填	說明
   access_token	string		是	接口調(diào)用憑證
   jump_wxa	Object		否	跳轉(zhuǎn)到的目標(biāo)小程序信息。
   is_expire	boolean	false	否	生成的scheme碼類型，到期失效：true，永久有效：false。
   expire_time	number		否	到期失效的scheme碼的失效時(shí)間，為Unix時(shí)間戳。生成的到期失效scheme碼在該時(shí)間前有效。最長(zhǎng)有效期為1年。生成到期失效的scheme時(shí)必填。

   jump_wxa 的結(jié)構(gòu)

   屬性	類型	默認(rèn)值	必填	說明
   path	string		是	通過scheme碼進(jìn)入的小程序頁面路徑，必須是已經(jīng)發(fā)布的小程序存在的頁面，不可攜帶query。path為空時(shí)會(huì)跳轉(zhuǎn)小程序主頁。
   query	string		是	通過scheme碼進(jìn)入小程序時(shí)的query，最大128個(gè)字符，只支持?jǐn)?shù)字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

   請(qǐng)求示例：

   {
   ?"jump_wxa":?{
   ??"path":?"/pages/index/index",
   ??query":?""
   ?},
   ?"is_expire":?true,
   ?"expire_time":?1606737600
   }
   

   返回結(jié)果：

   {
   ?"errcode":?0,
   ?"errmsg":?"ok",
   ?"openlink":?Scheme,
   }
   

   openlink就是我們最終需要的URL Scheme啦~

二、云調(diào)用

云調(diào)用是小程序·云開發(fā)提供的在云函數(shù)中調(diào)用微信開放接口的能力，需要在云函數(shù)中通過 wx-server-sdk 使用

請(qǐng)求參數(shù)：

屬性	類型	默認(rèn)值	必填	說明
access_token	string		是	接口調(diào)用憑證
jump_wxa	Object		否	跳轉(zhuǎn)到的目標(biāo)小程序信息。
isExpire	boolean	false	否	生成的scheme碼類型，到期失效：true，永久有效：false。
expireTime	number		否	到期失效的scheme碼的失效時(shí)間，為Unix時(shí)間戳。生成的到期失效scheme碼在該時(shí)間前有效。最長(zhǎng)有效期為1年。生成到期失效的scheme時(shí)必填。

注意和HTTPS中參數(shù)名大小寫不一致的情況

jump_wxa 的結(jié)構(gòu)

屬性	類型	默認(rèn)值	必填	說明
path	string		是	通過scheme碼進(jìn)入的小程序頁面路徑，必須是已經(jīng)發(fā)布的小程序存在的頁面，不可攜帶query。path為空時(shí)會(huì)跳轉(zhuǎn)小程序主頁。
query	string		是	通過scheme碼進(jìn)入小程序時(shí)的query，最大128個(gè)字符，只支持?jǐn)?shù)字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~

請(qǐng)求示例：

const?cloud?=?require('wx-server-sdk')
cloud.init({
??env:?cloud.DYNAMIC_CURRENT_ENV,
})
exports.main?=?async?(event,?context)?=>?{
??try?{
????const?result?=?await?cloud.openapi.urlscheme.generate({
????????jumpWxa:?{
??????????path:?'/pages/index/index',
??????????query:?''
????????},
????????isExpire:?true,
????????expireTime:?1606737600
??????})
????return?result
??}?catch?(err)?{
????return?err
??}
}

返回結(jié)果：

{
?"errcode":?0,
?"errmsg":?"ok",
?"openlink":?Scheme,
}

openlink就是我們最終需要的URL Scheme啦~

小程序URL Scheme的使用

小程序URL Scheme的結(jié)構(gòu)是：weixin://dl/business/?t= *TICKET*，那我們拿到這個(gè)scheme之后如果使用呢。

在IOS系統(tǒng)下是支持直接識(shí)別URL Scheme的，所以可以直接將URL Scheme發(fā)送到短信、郵件中，提供給用戶使用。但是在Android系統(tǒng)不支持直接識(shí)別URL Scheme，用戶無法Scheme正常打開小程序，所以需要開發(fā)者自行使用H5頁面進(jìn)行中轉(zhuǎn)，再跳轉(zhuǎn)使用Scheme方式打開微信小程序。

端	使用方式	備注
Android	location.href='weixin://dl/business/?t= *TICKET*'	只有一種方式
IOS	直接識(shí)別URL Scheme 或使用location.href方式	兩種方式

But, 我們要注意一個(gè)問題，當(dāng)我們進(jìn)行短信觸達(dá)時(shí)，無法確定用戶所使用的的手機(jī)設(shè)備是IOS還是Android，

So, 我們從實(shí)際的業(yè)務(wù)觸發(fā)，都需要一個(gè)H5頁面進(jìn)行中轉(zhuǎn)處理。

小程序喚起業(yè)務(wù)流程圖

當(dāng)當(dāng)當(dāng)，綜合兩種打開小程序的方式（URL Scheme和 ），完整版的小程序喚起業(yè)務(wù)流程圖來啦~

小程序喚起業(yè)務(wù)流程圖

后記