一、背景
近期,项目中有一个需求是扫普通链接二维码打开微信小程序的需求,所以整理了一下。
首先,唤起微信小程序的几种方式:
- 扫小程序码。
- 扫小程序二维码,可满足不同需求和场景,例如业务中需要记录渠道参数等。该二维码可通过微信提供的接口生成,详情看获取小程序二维码
- 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 分钟以后才可以使用。(这个坑我没踩,因为我写这篇文章的时候还处在调研阶段,哈哈)