前言
千呼萬喚始出來，微信小程式終于支持以URL Scheme的形式從外部喚起了，
long long ago~ 我們只能在微信內的網頁中使用微信開發標簽-小程式跳轉按鈕 <wx-open-launch-weapp>打開小程式，只有這樣一種單一的場景，
而在實際的業務中，我們希望在給用戶發送的營銷短信、郵件或其他渠道如APP打開小程式，以快速獲取用戶流量，完成引流、導購等目的，
他來啦，他來啦，微信小程式悄咪咪的上線了新功能：支持URL Scheme打開小程式了，
新品上線
URL Scheme打開小程式新品上線，速來嘗鮮，
可以隨著胡哥的角度為你一一闡述、總結分析，也可以直接點擊官方檔案傳送門查看官方檔案呦~
我們首先來看下目前微信官方提供的兩種打開微信小程式的方式以及相關適用場景，
| 打開方式 | 適用場景 | 場景值 | 使用方式 | 備注 |
|---|---|---|---|---|
| URL Scheme | 短信、郵件、微信外網頁打開小程式 | 1065 | location.href = 'weixin://dl/business/?t= *TICKET*' |
TICKET由服務端介面回傳 |
<wx-open-launch-weapp> |
微信內網頁 | 1167 | 頁面配置<wx-open-launch-weapp>標簽 |
需配置JS介面域名或云開發靜態網站托管系結的域名下網頁 |
一定要注意區分兩種方式的適用場景：URL scheme是適用于微信外網頁，
<wx-open-launch-weapp>
是適用于微信內的，
小程式URL Scheme的獲取
小程式的URL Scheme的結構為 weixin://dl/business/?t= *TICKET*，其中TICKET由服務端介面回傳的，服務端介面區分兩種形式：HTTPS呼叫和云開發呼叫，
一、HTTPS呼叫
-
獲取ACCESS_TOKEN
請求地址：
GET https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=APPID&secret=APPSECRET對應的APPID和APPSECRET換成自己對應的小程式即可，
回傳的資料結構如下：
{ "access_token": "ACCESS_TOKEN", "expires_in": 7200 } -
獲取URL Scheme
請求地址：
POST https://api.weixin.qq.com/wxa/generatescheme?access_token=ACCESS_TOKEN請求引數：
屬性 型別 默認值 必填 說明 access_token string 是 介面呼叫憑證 jump_wxa Object 否 跳轉到的目標小程式資訊， is_expire boolean false 否 生成的scheme碼型別，到期失效：true，永久有效：false， expire_time number 否 到期失效的scheme碼的失效時間，為Unix時間戳，生成的到期失效scheme碼在該時間前有效，最長有效期為1年，生成到期失效的scheme時必填， jump_wxa 的結構
屬性 型別 默認值 必填 說明 path string 是 通過scheme碼進入的小程式頁面路徑，必須是已經發布的小程式存在的頁面，不可攜帶query，path為空時會跳轉小程式主頁， query string 是 通過scheme碼進入小程式時的query，最大128個字符，只支持數字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~ 請求示例：
{ "jump_wxa": { "path": "/pages/index/index", query": "" }, "is_expire": true, "expire_time": 1606737600 }回傳結果：
{ "errcode": 0, "errmsg": "ok", "openlink": Scheme, }openlink就是我們最終需要的URL Scheme啦~
二、云呼叫
云呼叫是小程式·云開發提供的在云函式中呼叫微信開放介面的能力，需要在云函式中通過 wx-server-sdk 使用
請求引數：
| 屬性 | 型別 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| access_token | string | 是 | 介面呼叫憑證 | |
| jump_wxa | Object | 否 | 跳轉到的目標小程式資訊， | |
| isExpire | boolean | false | 否 | 生成的scheme碼型別，到期失效：true，永久有效：false， |
| expireTime | number | 否 | 到期失效的scheme碼的失效時間，為Unix時間戳，生成的到期失效scheme碼在該時間前有效，最長有效期為1年，生成到期失效的scheme時必填， |
注意和HTTPS中引數名大小寫不一致的情況
jump_wxa 的結構
| 屬性 | 型別 | 默認值 | 必填 | 說明 |
|---|---|---|---|---|
| path | string | 是 | 通過scheme碼進入的小程式頁面路徑，必須是已經發布的小程式存在的頁面，不可攜帶query，path為空時會跳轉小程式主頁， | |
| query | string | 是 | 通過scheme碼進入小程式時的query，最大128個字符，只支持數字，大小寫英文以及部分特殊字符：!#$&'()*+,/:;=?@-._~ |
請求示例：
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
}
}
回傳結果：
{
"errcode": 0,
"errmsg": "ok",
"openlink": Scheme,
}
openlink就是我們最終需要的URL Scheme啦~
小程式URL Scheme的使用
小程式URL Scheme的結構是：weixin://dl/business/?t= *TICKET*，那我們拿到這個scheme之后如果使用呢，
在IOS系統下是支持直接識別URL Scheme的，所以可以直接將URL Scheme發送到短信、郵件中，提供給用戶使用，但是在Android系統不支持直接識別URL Scheme，用戶無法Scheme正常打開小程式，所以需要開發者自行使用H5頁面進行中轉，再跳轉使用Scheme方式打開微信小程式，
| 端 | 使用方式 | 備注 |
|---|---|---|
| Android | location.href='weixin://dl/business/?t= *TICKET*' |
只有一種方式 |
| IOS | 直接識別URL Scheme 或使用location.href方式 | 兩種方式 |
But, 我們要注意一個問題，當我們進行短信觸達時，無法確定用戶所使用的的手機設備是IOS還是Android，
So, 我們從實際的業務觸發，都需要一個H5頁面進行中轉處理，
小程式喚起業務流程圖
當當當，綜合兩種打開小程式的方式（URL Scheme和 <wx-open-launch-weapp>），完整版的小程式喚起業務流程圖來啦~
后記
以上就是胡哥今天給大家分享的內容，喜歡的小伙伴記得點贊、收藏呦，關注胡哥有話說，學習前端不迷路，歡迎多多留言交流...
胡哥有話說，專注于大前端技術領域，分享前端系統架構，框架實作原理，最新最高效的技術實踐！
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/256261.html
標籤：JavaScript