微信小程序生成带动态参数二维码

发财发财发大财

已于 2024-11-01 15:41:17 修改

阅读量1.3w

点赞数 17

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：微信小程序小程序

于 2023-02-10 18:08:39 首次发布

本文链接：https://blog.csdn.net/weixin_42322886/article/details/128974862

文章详细介绍了如何在微信公众号后台配置链接，使用户扫描生成的二维码直接跳转到小程序，并展示了如何使用canvas在前端生成二维码图像。还提供了相应的JavaScript代码示例，包括后台配置、前端二维码绘制和接收参数等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

2024/11/1 感觉setTimeout(() => {
this.canvasToTempImage();
}, 1000);这样延迟调用好鸡肋，所以js和调用方法优化了一下，改成then函数调用，避免延迟。

首先说一下我的使用场景，用户可根据id生成这一条记录的二维码，其他人扫码直接跳转到小程序，显示这条记录的具体信息。

分两步：第一在微信公众号后台配置，第二利用canvas前端实现二维码展示，并接收参数做下一步处理。

第一步：后台配置

登录微信公众平台，依次点击开发管理 -> 开发设置 -> 扫普通链接二维码打开小程序添加一个规则
二维码就是一个链接，填写你配置好的路径以及需要跳转的小程序功能页面。
在这里插入图片描述 需要注意的是，如果你测试选择的体验版，测试链接后携带的参数一定要和生成二维码路径的参数相同，否则会跳转到正式版的页面。

配置好发布，然后就开始打代码了。

第二步：有趣的代码

wxml中声明画布：

 <canvas class="canvas" canvas-id="mycanvas" />

引入js

var OR = require('../../../../utils/qrcode.js')

    generateQRCode(e) {
   
   
        let id = e.currentTarget.dataset.id;
        this.createOrCode(配置的链接, 'mycanvas', 300, 300)
    },
    //生成二维码
    createOrCode(url, canvasId, cavW, cavH) {
   
   
        //调用插件中的draw方法，绘制二维码图片
        //OR.api.draw(url, canvasId, cavW, cavH);
        //setTimeout(() => {
   
   
            //this.canvasToTempImage();
        //}, 1000);
		//2.0版本
		// 调用插件中的 draw 方法，绘制二维码图片
	   OR.api.draw('', url, canvasId, cavW, cavH).then(() => {
   
   
	      this.canvasToTempImage();
	  	});
    },
    canvasToTempImage: function () {
   
   
        var that = this;
        wx.canvasToTempFilePath({
   
   
            canvasId: 'mycanvas',
            success: function (res) {
   
   
                var tempFilePath = res.tempFilePath;
                console.log('生成临时图片路径。。。。', tempFilePath);
                that.setData({
   
   
                    imagePath: tempFilePath,
                    orcode:false
                });
            },
            fail: function (res) {
   
   
                console.log(res);
            }
        });
    }

相应页面接收参数代码如下：

// 获取url参数 支持中文
export const GetRequest = (params) => {
   
   
    let url = params.substring(params.indexOf("?")); //获取url中"?"符后的字串
    let theRequest = new Object();
    if (url.indexOf("?") != -1) {
   
   
        let str = url.substr(1);
        let strs = str.split("&");
        for (let i = 0; i < strs.length; i++) {
   
   
            theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
        }
    }
    return theRequest;
}
 onLoad: function (options) {
   
   
    const param= GetRequest(decodeURIComponent(options.q))
  }

这样就可以生成二维码了，且扫描二维码跳转到小程序，相应页面可获取到对应参数，在请求相对应接口或者进行下一步处理。
我美化了一下，点击弹出二维码，可保存图片，也可直接转发给好友。
在这里插入图片描述

js如下：

!(function () {
   
   

  // alignment pattern
  var adelta = [
    0, 11, 15, 19, 23, 27, 31,
    16, 18, 20, 22, 24, 26, 28, 20, 22, 24, 24, 26, 28, 28, 22, 24, 24,
    26, 26, 28, 28, 24, 24, 26, 26, 26, 28, 28, 24, 26, 26, 26, 28, 28
  ];

  // version block
  var vpat = [
    0xc94, 0x5bc, 0xa99, 0x4d3, 0xbf6, 0x762, 0x847, 0x60d,
    0x928, 0xb78, 0x45d, 0xa17, 0x532, 0x9a6, 0x683, 0x8c9,
    0x7ec, 0xec4, 0x1e1, 0xfab, 0x08e, 0xc1a, 0x33f, 0xd75,
    0x250, 0x9d5, 0x6f0, 0x8ba, 0x79f, 0xb0b, 0x42e, 0xa64,
    0x541, 0xc69
  ];

  // final format bits with mask: level << 3 | mask
  var fmtword = [
    0x77c4, 0x72f3, 0x7daa, 0x789d, 0x662f, 0x6318, 0x6c41, 0x6976, //L
    0x5412, 0x5125, 0x5e7c, 0x5b4b, 0x45f9, 0x40ce, 0x4f97, 0x4aa0, //M
    0x355f, 0x3068, 0x3f31, 0x3a06, 0x24b4, 0x2183, 0x2eda, 0x2bed, //Q
    0x1689, 0x13be, 0x1ce7, 0x19d0, 0x0762, 0x0255, 0x0d0c, 0x083b //H
  ];

  // 4 per version: number of blocks 1,2; data width; ecc width
  var eccblocks = [
    1, 0, 19, 7, 1, 0, 16, 10, 1, 0, 13, 13, 1, 0, 9, 17,
    1, 0, 34, 10, 1, 0, 28, 16, 1, 0, 22, 22, 1, 0, 16, 28,
    1, 0, 55, 15, 1, 0, 44, 26, 2, 0, 17, 18, 2, 0, 13, 22,
    1, 0, 80, 20, 2, 0, 32, 18, 2, 0, 24, 26, 4, 0, 9, 16,
    1, 0, 108, 26, 2, 0, 43, 24, 2, 2, 15, 18, 2, 2, 11, 22,
    2, 0, 68, 18, 4, 0, 27, 16, 4, 0, 19, 24, 4, 0, 15, 28,
    2, 0, 78, 20, 4, 0, 31, 18, 2, 4, 14, 18, 4, 1, 13, 26,
    2, 0, 97, 24, 2, 2, 38, 22, 4, 2, 18, 22, 4, 2, 14, 26,
    2, 0, 116, 30, 3, 2, 36, 22, 4, 4, 16, 20, 4, 4, 12, 24,
    2, 2, 68, 18, 4, 1, 43, 26, 6, 2, 19, 24, 6, 2, 15, 28,
    4, 0, 81, 20, 1, 4, 50, 30, 4, 4, 22, 28, 3, 8, 12, 24,
    2, 2, 92, 24, 6, 2, 36, 22, 4, 6, 20, 26, 7, 4, 14, 28,
    4, 0, 107, 26, 8, 1, 37, 22, 8, 4, 20, 24, 12, 4, 11, 22,
    3, 1, 115, 30, 4, 5, 40, 24, 11, 5, 16, 20, 11, 5, 12, 24,
    5, 1, 87, 22, 5, 5, 41, 24, 5, 7, 24, 30, 11, 7, 12, 24,
    5, 1, 98, 24, 7, 3, 45, 28, 15, 2, 19, 24, 3, 13, 15, 30,
    1, 5, 107, 28, 10, 1, 46, 28, 1, 15, 22, 28, 2, 17, 14, 28,
    5, 1, 120, 30, 9, 4, 43, 26, 17, 1, 22, 28, 2, 19, 14, 28,
    3, 4, 113, 28, 3, 11, 44, 26, 17, 4, 21, 26, 9, 16, 13, 26,
    3, 5, 107, 28, 3, 13, 41, 26, 15, 5, 24, 30, 15, 10, 15, 28,
    4, 4, 116, 28, 17, 0, 42, 26, 17, 6, 22, 28, 19, 6, 16, 30,
    2, 7, 111, 28, 17, 0, 46, 28, 7, 16, 24, 30, 34, 0, 13, 24,
    4, 5, 121, 30, 4, 14, 47, 28, 11, 14, 24, 30, 16, 14, 15, 30,
    6, 4, 117, 30, 6, 14, 45, 28, 11, 16, 24, 30, 30, 2, 16, 30,
    8, 4, 106, 26, 8, 13, 47, 28, 7, 22, 24, 30, 22, 13, 15, 30,
    10, 2, 114, 28, 19, 4, 46, 28, 28, 6, 22, 28, 33, 4, 16, 30,
    8, 4, 122, 30, 22, 3, 45, 28, 8, 26, 23, 30, 12, 28, 15, 30,
    3, 10, 117, 30, 3, 23, 45, 28, 4, 31, 24, 30, 11, 31, 15, 30,
    7, 7, 116, 30, 21, 7, 45, 28, 1, 37, 23, 30, 19, 26, 15, 30,
    5, 10, 115, 30, 19, 10, 47, 28, 15, 25, 24, 30, 23, 25, 15, 30,
    13, 3, 115, 30, 2, 29, 46, 28, 42, 1, 24, 30, 23, 28, 15, 30,
    17, 0, 115, 30, 10, 23, 46, 28, 10, 35, 24, 30, 19, 35, 15, 30,
    17, 1, 115, 30, 14, 21, 46, 28, 29, 19, 24, 30, 11, 46, 15, 30,
    13, 6, 115, 30, 14, 23, 46, 28, 44, 7, 24, 30, 59, 1, 16, 30,
    12, 7, 121, 30, 12, 26, 47, 28, 39, 14, 24, 30, 22, 41, 15, 30,
    6, 14, 121, 30, 6, 34, 47, 28, 46, 10, 24, 30, 2, 64, 15, 30,
    17,