<!-- 存放二維碼的圖片--><view class='container'>  <image bindtap="previewImg" mode="scaleToFill" src="{{imagePath}}"></image></view><!-- 畫布，用來畫二維碼，只用來站位，不用來顯示--><view class="canvas-box">  <canvas hidden="{{canvasHidden}}" style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="mycanvas" /></view>

.container {  display: flex;  align-items: center;  justify-content: center;  width: 100%;  height: 100%;}.container image {  width: 686rpx;  height: 686rpx;  background-color: #f9f9f9;}.canvas-box {  position: fixed;  top: 999999rpx;  left: 0;}

var QR = require("../../../lib/qrcode.js");Page({  /**   * 頁面的初始數據   */  data: {    canvasHidden: false,    imagePath: '',  },  /**   * 生命周期函數--監聽頁面加載   */  onLoad: function(options) {    //option為上個頁面傳遞過來的參數    var jiaoyanCode = 'sorry,jiaoyanCode is loss';    if (options) {      jiaoyanCode = options.jiaoyanCode;    }    console.log(jiaoyanCode);    var size = this.setCanvasSize(); //動態設置畫布大小     this.createQrCode(jiaoyanCode, "mycanvas", size.w, size.h);     },  //適配不同屏幕大小的canvas  setCanvasSize: function() {    var size = {};    try {      var res = wx.getSystemInfoSync();      var scale = 750 / 686; //不同屏幕下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方法，繪制二維碼圖片    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);      }    });  },  /**   * 點擊圖片進行預覽   */  previewImg: function (e) {    var img = this.data.imagePath;    console.log(img);    wx.previewImage({      current: img, // 當前顯示圖片的http鏈接      urls: [img] // 需要預覽的圖片http鏈接列表    });  },})