test.js

引入qrcode.js、base64.js两个文件qrcode.js是生成二维码的文件，base64.js用于对数据加密解密的文件。

import { qrApi} from "../../utils/qrcode.js";
import {Base64} from '../../utils/base64.js';
 /*
    生成二维码
  */
  makeqrcode: function () {
    var that = this;
    var jiaoyanCode = "../join/index?stid=" + that.data.ids;
    var str = Base64.encode(jiaoyanCode);
    var size = this.setCanvasSize(); //动态设置画布大小
    this.createQrCode(str, "mycanvas", size.w, size.h);
  },
  //适配不同屏幕大小的canvas
  setCanvasSize: function () {
    var size = {};
    try {
      var res = wx.getSystemInfoSync();
      var scale = 750 / 687; //不同屏幕下canvas的适配比例；设计稿是750宽  686是因为样式wxss文件中设置的大小
      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方法，绘制二维码图片
    qrApi.draw(url, canvasId, cavW, cavH, 2, "../../image/logo.png");
    setTimeout(() => {
      this.canvasToTempImage(canvasId);
    }, 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,
          xianshi: "block"
        });
      },
      fail: function (res) {
        console.log(res);
      }
    });
  },
  /*
    关闭二维码
  */
  colseqrcode: function () {
    this.setData({
      xianshi: "none"
    })
  },

test.wxml

<image src="../../image/share1.png" bindtap="makeqrcode" />
<!-- 存放二维码的图片-->
<view class='qrcodebox' style="display:{{xianshi}}">
<image src="{{imagePath}}" />
</view>
<view class="close" style="display:{{xianshi}}">
<image bindtap="colseqrcode" src="../../image/guanbi.png"  />
</view>
<!-- 画布，用来画二维码，只用来站位，不用来显示-->
<view class="canvas-box">
<canvas hidden="{{canvasHidden}}" style="width: 687rpx;height: 687rpx;background:#f1f1f1;" canvas-id="mycanvas" />
</view>

test.wxss

.qrcodebox {
  position: absolute;
  top: 215rpx;
  width: 100%;
}
.qrcodebox image {
  width: 687rpx;
  height: 687rpx;
  background-color: #f9f9f9;
}
.canvas-box {
  position: fixed;
  top: 999999rpx;
  left: 0;
}
.close {
  width: 100%;
  text-align: center;
  text-justify: center;
  margin-top: 31rpx;
}
.close image {
  width: 50rpx;
  height: 50rpx;
}

相关文件下载地址：文件下载.zip

效果图：