【前端】支付宝和微信小程序普通二维码跳转二合一

CrazyPanda发表于：2024-03-07 21:04:29浏览：268次TAG：

业务需要：

系统支持微信小程序和支付宝小程序，现在要扫码跳转到对应小程序，要使用一个二维码，并能携带业务参数，用户使用微信扫码，就能打开微信小程序并获取参数，使用支付宝扫码，就能打开支付宝小程序，并获取参数

一、微信小程序普通二维码跳转实现

1、在微信公众平台-开发管理-开发设置中找到【扫描普通链接二维码打开小程序】去配置二维码链接地址

参考：https://developers.weixin.qq.com/miniprogram/introduction/qrcode.html#%E5%8A%9F%E8%83%BD%E4%BB%8B%E7%BB%8D

2、配置要求

二维码规则：配置为二维码对应的链接，其中最后要加/，这样才可以动态传参。扫描后面参数不同的二维码都能跳转。这样类似与测试链接中 https://xxx.xxx.com/?sid=1或者https://xxx.xxx.com/?sid=2等的链接都可以跳转
当配置未发布时，扫描测试链接才可以跳转（未发布时没法匹配动态参数）
下载校验文件要放在对应二维码链接域名对应服务器的根目录中，然后再点击保存
跳转的小程序一直都是发布了的小程序
后端返回的二维码链接地址也要有/，就是说https://xxx.xxx.com/?sid=1可以跳转，但https://xxx.xxx.com?sid=2不会跳转小程序

3、发布后的规则微信扫描跳转的小程序是发布了的小程序

如果要是想在测试阶段跳转体验版的小程序（体验版的小程序调用的后端接口也不同的话）

可以再添加一条规则-同上，二维码规则填写测试环境的链接

不同的是，测试链接要填写，只有填写在测试链接的二维码才会跳转体验小程序

4、小程序页面接收参数

二维码链接内容会以参数 q 的形式带给页面，在onLoad事件中提取 q 参数并自行 decodeURIComponent 一次（对于小游戏可使用 wx.getEnterOptionsSync 接口获取），即可获取原二维码的完整内容。同时会附加一个参数 scancode_time（UNIX 时间戳，单位秒），表示用户扫码的时间。

Page({
  onLoad(query) {
    const q = decodeURIComponent(query.q) // 获取到二维码原始链接内容
    const scancode_time = parseInt(query.scancode_time) // 获取用户扫码时间 UNIX 时间戳
  }})

二、支付宝小程序普通二维码跳转实现

1、规则配置

参考：https://opendocs.alipay.com/isv/03kve4

在开放平台控制台> 第三方应用详情页 > 小程序模板详情页 > 二维码管理 > 关联普通二维码 中，点击添加。

支付宝这个要比微信的好配置的多，直接就是精确匹配和模糊匹配，因为我们会有不同的业务参数，我们直接选择模糊参数模式

二维码地址需要和微信配置的相同，以便我们最后使用相同的链接生成一个二维码使用，我们同样设置为：https://xxx.xxx.com/

2、精确匹配和模糊匹配区别：

精确匹配：根据填写的二维码地址精确匹配，地址完全一致时才能唤起小程序并跳转到指定页面（如配置二维码地址为 https://www.alipay.com/my/doc?id=123 ，当用户扫这个地址的二维码可唤起小程序）。

模糊匹配：根据填写的二维码地址前缀模糊匹配，只要地址前缀匹配即可唤起小程序跳转到指定页面（如配置二维码地址为 https://www.alipay.com/my/ ，当用户扫的二维码地址为 https://www.alipay.com/my/doc?id=123 可唤起小程序，只要前缀完全匹配即可唤起小程序）。

3、小程序页面获取参数值

获取二维码码值请在小程序 app.js 文件的 onLaunch() 方法中使用 options.query 获取，解析码值可得到二维码地址 ? 后的所携参数，示例代码如下。

onLaunch(options){
    my.alert({
      title: 'app onLaunch',
      content:  JSON.stringify(options),
      success: (res) => {
          //成功处理代码段
      },
    });
  //获取关联普通二维码的码值，放到全局变量qrCode中
  if (options.query && options.query.qrCode) {
      this.qrCode = options.query.qrCode;
    }