扫普通链接二维码打开小程序 动态匹配参数

背景：

为了提高活动预约效率，公司希望通过微信小程序，让用户扫描二维码提前预约活动，避免现场排队。

具体流程如下：后台管理系统自动生成包含活动ID、活动名称等参数的二维码，用户扫描二维码后，能够跳转到小程序的活动预约页面。

【核心点：二维码中 要动态传递多个参数】

相关文档链接：扫码打开小程序接入指南

功能描述

1. 用户通过微信扫一扫扫描活动预约二维码，小程序将自动弹出并跳转到“XXX活动预约”页面。
2. 解析二维码中的参数（如活动ID、活动名称），并将活动名称作为页面标题。用户在预约页面填写信息时，活动ID和活动名称将与其他用户输入的数据一同传递到后台，完成活动预约。

操作步骤

1.到 微信公众平台 对 扫普通链接二维码打开小程序 功能进行配置

微信公众平台 (qq.com)

首先按照官方文档我们先做好配置工作，配置流程如下：小程序后台配置 ---> 开发管理 ---> 开发设置 ---> 扫普通链接二维码打开小程序

注意

2.填写配置项

• 线上版本的二维码配置中，二维码规则和校验文件两项的配置需要后端配合。（不用填写“测试链接”）
• 测试时，二维码规则可以自定义，校验文件不用管，但是测试链接一定要填写，测试范围选择体验版，这样的话，用微信扫描测试链接的二维码，就可以跳转到体验版小程序。

3.创建参数二维码

• 测试时，可以去草料网根据上一步中填写的测试链接生成二维码。

4.小程序中解析参数步骤

view.js代码

Page({
    data: {
        msg: '',
        id: ''
    },
    onLoad: function (query) {
        //onLoad参数query.q可以拿到编码加密后的二维码链接
        if (query.q) {
            //TODO: 第一版 匹配规则：https://mini.dolphin.com/qr?id=123456&msg=活动名称
            if (true) {
                //1. 解析二维码, 获取活动ID
                const id = this.getURLParameter(decodeURIComponent(query.q), 'id');  // 获取到二维码原始链接内容
                const msg = this.getURLParameter(decodeURIComponent(query.q), 'msg');  // 获取到二维码原始链接内容

                //2. 设置data
                this.setData({
                    [`msg`]: msg,
                    [`id`]: id,
                });

                //3. 显示toast提示
                wx.showToast({
                    title: `ID: ${id}\n 名称: ${msg}`,
                    icon: 'none'
                });
            }
            //TODO: 第二版 匹配规则：https://mini.dolphin.com/qr?qrParam=123456_活动名称
            else {

                const param = this.getURLParameter(decodeURIComponent(query.q), 'qrParam');  // 获取到二维码原始链接内容
                if (param) {
                    const paramArr = param.split('_');
                    const id = paramArr[0];
                    const msg = paramArr[1];
                    this.setData({
                        [`msg`]: msg,
                        [`id`]: id,
                    });

                    wx.showToast({
                        title: `ID: ${id}\n 名称: ${msg}`,
                        icon: 'none'
                    });
                }

            }    
        }
    },
    // region 工具函数 **********************************************************
    getURLParameter: function (url, name) {
        const match = new RegExp('[?&]' + name + '=([^&]*)').exec(url);
        return match ? decodeURIComponent(match[1]) : null;
    }
    // endregion
})

view.wxml代码

<view class="page">
    <view class="container">
        <!-- 显示活动 ID 和名称 -->
        <view class="activity-info">
            <text class="label">活动ID:</text>
            <text class="value">{{id}}</text>
        </view>
        <view class="activity-info">
            <text class="label">活动名称:</text>
            <text class="value">{{msg}}</text>
        </view>
    </view>
</view>

view.wxss代码

.page {
  padding: 10px; /* 页面内边距 */
}

.container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.activity-info {
  margin-bottom: 15px;
}

.label {
  font-weight: bold;
  color: #333;
}

.value {
  font-size: 16px;
  color: #666;
}

.text {
  font-size: 16px;
  color: #000;
}

app.json中添加页面

{
  "pages": [
      "pages/debugPages/view/view"
  ]
}

如果感觉笔记写的不错，请点赞 + 评论