一、背景
近期，項(xiàng)目中有一個需求是掃普通鏈接二維碼打開微信小程序的需求，所以整理了一下。
首先，喚起微信小程序的幾種方式：
- 掃小程序碼。
- 掃小程序二維碼，可滿足不同需求和場景，例如業(yè)務(wù)中需要記錄渠道參數(shù)等。該二維碼可通過微信提供的接口生成，詳情看獲取小程序二維碼
- H5 項(xiàng)目喚起小程序，分為三種情況：
- 在微信瀏覽器中，只能通過 wx-open-launch-weapp 標(biāo)簽喚起，可參考文章【關(guān)于 React 中使用 wx-open-launch-weapp 喚起微信小程序】，適用于公眾號網(wǎng)頁或者活動等打開小程序的場景。
- 普通瀏覽器（如Safari、UC、系統(tǒng)自帶瀏覽器等），可通過 URL Scheme 打開小程序 方式喚起，需自行編寫 H5 實(shí)現(xiàn)，使用于短信推送等場景。
- 微信小程序存在競爭關(guān)系的的 App，以上方式均無法喚起，你懂的。
- 掃普通鏈接二維碼打開小程序（本文介紹的對象）。登錄小程序后臺，進(jìn)入“設(shè)置 — 開發(fā)設(shè)置 — 掃普通鏈接二維碼打開小程序”，開啟功能后即可配置二維碼規(guī)則。這種方式配置簡單、靈活，且無需自行開發(fā) H5 項(xiàng)目。
總的來說，
wx-open-launch-weapp需在微信客戶端方可有效。URL Scheme方式僅可在普通瀏覽器中喚起。這兩種都需要自行實(shí)現(xiàn) H5。普通鏈接二維碼支持使用微信掃一掃或微信內(nèi)長按識別二維碼跳轉(zhuǎn)小程序。
二、掃普通鏈接二維碼打開小程序
下面只會介紹或者強(qiáng)調(diào)，一些踩坑點(diǎn)、容易忽略的地方，更詳細(xì)請看 ?? 官方文檔。
對于普通鏈接二維碼，目前支持使用微信掃一掃或微信內(nèi)長按識別二維碼跳轉(zhuǎn)小程序。
該功能暫不支持個人類型小程序。
二維碼跳轉(zhuǎn)規(guī)則其中一條需要注意的：如需支持子路徑匹配，請確認(rèn)后臺配置的二維碼規(guī)則以
/結(jié)尾。
| 后臺已配置的二維碼規(guī)則 | 線下二維碼完整鏈接 | 錯誤原因 |
|---|---|---|
| https://www.qq.com/a/b | https://www.qq.com/a/b/123 | 規(guī)則沒有以 / 結(jié)尾，不支持子路徑匹配 |
- 帶參取參的問題：
假設(shè)我們所要打開小程序的路徑為 pages/index/index，需要攜帶參數(shù) channel 字段，若配置如下：
圖中二維碼規(guī)則的域名是亂寫的，自行改成名下服務(wù)器并校驗(yàn)即可。
所以我們就可以拿到一個符合規(guī)則的鏈接：https://www.qq.com/test?channel=123，這也滿足了我們攜帶 channel 參數(shù)的需求。然后我們可以利用其它工具將該鏈接生成二維碼測試一下。
如不確定自己編寫的鏈接是否滿足規(guī)則，可在配置項(xiàng)的測試鏈接中填寫，若不符合規(guī)則，會有提示以及無法保存成功。
如何獲取該參數(shù)呢？
我們二維碼的鏈接內(nèi)容會以參數(shù) q 的形式帶給頁面?？稍?App.onLaunch、App.onShow、Page.onLoad 中取出來，還需要自行 decodeURIComponent 一下，才是原二維碼的完整內(nèi)容。
// app.js
App({
onLaunch(options) {
console.log(options)
// {
// mode: 'default',
// path: 'pages/index/index',
// query: {
// q: 'https%3A%2F%2Fwww.qq.com%2Ftest%3Fchannel%3D123',
// scancode_time: '1615973269',
// },
// referrerInfo: {
// scene: 1011
// }
// }
}
})
// index.js
Page({
onLoad(options) {
console.log(options)
// {
// q: 'https%3A%2F%2Fwww.qq.com%2Ftest%3Fchannel%3D123',
// scancode_time: '1615973269'
// }
}
})
小程序必須先發(fā)布代碼才可以發(fā)布二維碼跳轉(zhuǎn)規(guī)則。一個小程序帳號一個月可發(fā)布不多于 20 次二維碼跳轉(zhuǎn)規(guī)則。
如何在不提審的情況下進(jìn)行測試？
假設(shè)我們小程序已經(jīng)上線，且相關(guān)規(guī)則發(fā)布之后，掃碼該鏈接會打開線上版本的小程序。如果我們想要打開開發(fā)版，就要在測試鏈接中，將該鏈接配置并保存，然后重新掃碼即可。
- 二維碼配置規(guī)則必須發(fā)布后等待 5 分鐘以后才可以使用。（這個坑我沒踩，因?yàn)槲覍戇@篇文章的時候還處在調(diào)研階段，哈哈）
