微信小程序生成带参二维码——并通过扫码获取二维码的参数

注意：保证当前小程序要有线上版本

通过url拼接参数。http://***.com?id=123

这种方式要利用一个插件（GitHub - adventurewithme/chajian: 用到的各种插件里面的qrcode.js）。

要转换的这个url必须要在微信公众平台配置了扫普通链接二维码打开小程序，如下图：

测试连接是开发人员测试用的，跳转至测试版本的小程序，如果，转换的url不是测试连接，那么就会跳转到线上版本的小程序。并且有一个缺点，只能跳转到下图配置的小程序功能页面。

wxml部分：

<view class="container-box">
    <view class="img-box">
        <image mode="scaleToFill" src="{{imagePath}}"></image>
    </view>
</view>

在js部分要先引入插件：var QR = require("../../utils/qrcode.js");

var QR = require("../../utils/qrcode.js");
Page({
  data:{
    imagePath:'',
    placeholder: 'https://www.baidu.com?name=test123'//这里的连接换成自己的，并且已经在微信公众平台配置扫普通链接二维码打开小程序
  },
  onLoad:function(options){
    // 页面初始化 options为页面跳转所带来的参数
    var size = this.setCanvasSize();//动态设置画布大小
    var initUrl = this.data.placeholder;
    this.createQrCode(initUrl, "mycanvas", size.w, size.h);



    

  },
  //适配不同屏幕大小的canvas
  setCanvasSize:function(){
    var size={};
    try {
        var res = wx.getSystemInfoSync();
        var scale = 750/686;//不同屏幕下canvas的适配比例；设计稿是750宽
        var width = res.windowWidth/scale;
        var height = width;//canvas画布为正方形
        size.w = width;
        size.h = height;
      } catch (e) {
        // Do something when catch error
        console.log("获取设备信息失败"+e);
      } 
    return size;
  } ,
  createQrCode:function(url,canvasId,cavW,cavH){
    //调用插件中的draw方法，绘制二维码图片
let _=this;
    QR.api.draw(url,canvasId,cavW,cavH);
//如果在自定义组件中使用,要传入this QR.api.draw(url,canvasId,cavW,cavH,_);
    setTimeout(() => { this.canvasToTempImage();},1000);
    
  },
  //获取临时缓存照片路径，存入data中
  canvasToTempImage:function(){
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log(tempFilePath);
          that.setData({
              imagePath:tempFilePath,
             // canvasHidden:true
          });
      },
      fail: function (res) {
          console.log(res);
      }
    });
//如果在自定义组建中使用，这里要传入this
//wx.canvasToTempFilePath({****同上},that)
  },
 
})

这样页面上就生成了一个普通二维码。

当placeholder与测试连接相同的时候，扫这个二维码就跳转至测试版本的小程序，placeholder与测试连接不同，则跳转至线上版本的小程序。

获取这个placeholder后拼接的参数的方式是：在打开的这个页面的onLoad函数里面获取options。

即：

上面这张图是小编的url只拼接了一个参数id，如果拼接了多个参数，需要按照情况处理。

如此就得到了url中的id。

通过微信开发文档将页面转换为带参数的小程序码（一定要保证当前小程序有线上版本）

参考文档：获取不限制的小程序码 | 微信开放文档

注意：这种方式是一直会跳转到线上版本的小程序。

小编全程通过前端请求，所以要将微信开发者工具调为不校验合法域名。

1. 首先我们需要获取小程序的access_token

getaccess(){
    var that=this;
    wx.request({
      url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential',
      data: {
        appid: '你的appid',
        secret: '你的小程序密钥'
      },
      success:function(res){
        that.getcode(res.data.access_token)
      }
    })
  },

2.将要转换的页面和参数转换为小程序码。

请求微信的接口的时候请求方式为post，要注意设置相应的数据格式为arraybuffer，请求完毕后将数值转换为base64。

  getcode(access_token){
    var that=this;
    var scene='id=123&name=jack';//拼接你要添加的参数
    wx.request({
      url: 'https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=' + access_token,
      data: {
        scene: scene,
        page: 'pages/logs/logs',//线上的小程序一定要有这个页面
      },
      method:'POST',
      responseType: 'arraybuffer',
      success:function(res){
        var src2 = wx.arrayBufferToBase64(res.data);  //对数据进行转换
        that.setData({
          src2
        })
      }
    })
  },

base64在wxml上面显示方式为：

<image src="https://img-blog.csdnimg.cn/2022010622333094380.png" style="width:750rpx;height:750rpx"></image>

上面就得到了当前页面小程序的带参二维码。

扫码获取这个二维码携带的参数的方式是，在pages/logs/logs页面的onLoad函数里面获取options。

即：

 onLoad: function (options) {
    this.setData({
      scene: decodeURIComponent(options.q)
    })
  },

此时可以得到q为“id=123&name=jack”。