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