一、背景
近期，项目中有一个需求是扫普通链接二维码打开微信小程序的需求，所以整理了一下。
首先，唤起微信小程序的几种方式：
- 扫小程序码。
- 扫小程序二维码，可满足不同需求和场景，例如业务中需要记录渠道参数等。该二维码可通过微信提供的接口生成，详情看获取小程序二维码
- H5 项目唤起小程序，分为三种情况：
- 在微信浏览器中，只能通过 wx-open-launch-weapp 标签唤起，可参考文章【关于 React 中使用 wx-open-launch-weapp 唤起微信小程序】，适用于公众号网页或者活动等打开小程序的场景。
- 普通浏览器（如Safari、UC、系统自带浏览器等），可通过 URL Scheme 打开小程序 方式唤起，需自行编写 H5 实现，使用于短信推送等场景。
- 微信小程序存在竞争关系的的 App，以上方式均无法唤起，你懂的。
- 扫普通链接二维码打开小程序（本文介绍的对象）。登录小程序后台，进入“设置 — 开发设置 — 扫普通链接二维码打开小程序”，开启功能后即可配置二维码规则。这种方式配置简单、灵活，且无需自行开发 H5 项目。
总的来说，
wx-open-launch-weapp需在微信客户端方可有效。URL Scheme方式仅可在普通浏览器中唤起。这两种都需要自行实现 H5。普通链接二维码支持使用微信扫一扫或微信内长按识别二维码跳转小程序。
二、扫普通链接二维码打开小程序
下面只会介绍或者强调，一些踩坑点、容易忽略的地方，更详细请看 👉 官方文档。
-
对于普通链接二维码，目前支持使用微信扫一扫或微信内长按识别二维码跳转小程序。
-
该功能暂不支持个人类型小程序。
-
二维码跳转规则其中一条需要注意的：如需支持子路径匹配，请确认后台配置的二维码规则以
/结尾。
| 后台已配置的二维码规则 | 线下二维码完整链接 | 错误原因 |
|---|---|---|
| https://www.qq.com/a/b | https://www.qq.com/a/b/123 | 规则没有以 / 结尾，不支持子路径匹配 |
- 带参取参的问题：
假设我们所要打开小程序的路径为 pages/index/index，需要携带参数 channel 字段，若配置如下：
图中二维码规则的域名是乱写的，自行改成名下服务器并校验即可。
所以我们就可以拿到一个符合规则的链接：https://www.qq.com/test?channel=123，这也满足了我们携带 channel 参数的需求。然后我们可以利用其它工具将该链接生成二维码测试一下。
如不确定自己编写的链接是否满足规则，可在配置项的测试链接中填写，若不符合规则，会有提示以及无法保存成功。
如何获取该参数呢？
我们二维码的链接内容会以参数 q 的形式带给页面。可在 App.onLaunch、App.onShow、Page.onLoad 中取出来，还需要自行 decodeURIComponent 一下，才是原二维码的完整内容。
// 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'
// }
}
})
-
小程序必须先发布代码才可以发布二维码跳转规则。一个小程序帐号一个月可发布不多于 20 次二维码跳转规则。
-
如何在不提审的情况下进行测试？
假设我们小程序已经上线，且相关规则发布之后，扫码该链接会打开线上版本的小程序。如果我们想要打开开发版，就要在测试链接中，将该链接配置并保存，然后重新扫码即可。
- 二维码配置规则必须发布后等待 5 分钟以后才可以使用。（这个坑我没踩，因为我写这篇文章的时候还处在调研阶段，哈哈）
网友评论