扫普通链接二维码打开小程序的踩坑过程

Question

一、背景

近期，项目中有一个需求是扫普通链接二维码打开微信小程序的需求，所以整理了一下。

首先，唤起微信小程序的几种方式：

1. 扫小程序码。
2. 扫小程序二维码，可满足不同需求和场景，例如业务中需要记录渠道参数等。该二维码可通过微信提供的接口生成，详情看获取小程序二维码
3. H5 项目唤起小程序，分为三种情况：

• 在微信浏览器中，只能通过 wx-open-launch-weapp 标签唤起，可参考文章【关于 React 中使用 wx-open-launch-weapp 唤起微信小程序】，适用于公众号网页或者活动等打开小程序的场景。
• 普通浏览器（如Safari、UC、系统自带浏览器等），可通过 URL Scheme 打开小程序 方式唤起，需自行编写 H5 实现，使用于短信推送等场景。
• 微信小程序存在竞争关系的的 App，以上方式均无法唤起，你懂的。

4. 扫普通链接二维码打开小程序（本文介绍的对象）。登录小程序后台，进入**“设置 — 开发设置 — 扫普通链接二维码打开小程序”**，开启功能后即可配置二维码规则。这种方式配置简单、灵活，且无需自行开发 H5 项目。

总的来说，wx-open-launch-weapp 需在微信客户端方可有效。URL Scheme 方式仅可在普通浏览器中唤起。这两种都需要自行实现 H5。普通链接二维码 支持使用微信扫一扫或微信内长按识别二维码跳转小程序。

二、扫普通链接二维码打开小程序

下面只会介绍或者强调，一些踩坑点、容易忽略的地方，更详细请看 官方文档。

1. 对于普通链接二维码，目前支持使用微信扫一扫或微信内长按识别二维码跳转小程序。

2. 该功能暂不支持个人类型小程序。

3. 二维码跳转规则其中一条需要注意的：如需支持子路径匹配，请确认后台配置的二维码规则以 / 结尾。

后台已配置的二维码规则	线下二维码完整链接	错误原因
https://www.qq.com/a/b	https://www.qq.com/a/b/123	规则没有以 / 结尾，不支持子路径匹配

4. 带参取参的问题：

假设我们所要打开小程序的路径为 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'
    // }
  }
})

5. 小程序必须先发布代码才可以发布二维码跳转规则。一个小程序帐号一个月可发布不多于 20 次二维码跳转规则。

6. 如何在不提审的情况下进行测试？

假设我们小程序已经上线，且相关规则发布之后，扫码该链接会打开线上版本的小程序。如果我们想要打开开发版，就要在测试链接中，将该链接配置并保存，然后重新扫码即可。

7. 二维码配置规则必须发布后等待 5 分钟以后才可以使用。（这个坑我没踩，因为我写这篇文章的时候还处在调研阶段，哈哈）

三、参考

• 扫普通链接二维码打开小程序