小程序之根据参数生成二维码

小程序根据参数生成二维码

1、 引入js文件

 js文件地址：https://github.com/xiaoid/qrcodejs
 
 const QR = require("../../utils/qrcode.js");
    

2、调用方法

  /**
   * 页面的初始数据
   */
  data: {
    imagePath: '', /*二维码路径*/
  },
  
  onload:function(){
    //动态设置画布大小
    var size = app.setCanvasSize();
    var goods_url = res.data.data.goods_url == undefined ? 'undefined' : res.data.data.goods_url;
    that.createQrCode(goods_url, "mycanvas", size.w, size.h);
  }
  

3、绘制二维码

  /**
   * 绘制二维码图片
   * @params  url 生成内容
   * @params  canvasId 画布层id
   * @params  cavW  宽
   * @params  cavH  高
   */
  createQrCode: function (url, canvasId, cavW, cavH) {
    //调用插件中的draw方法，绘制二维码图片
    QR.api.draw(url, canvasId, cavW, cavH);
    setTimeout(() => {
      this.canvasToTempImage();
    }, 1000);
  },

4、 获取临时缓存照片路径，存入data中

   /**
    * 获取临时缓存照片路径，存入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);
      }
    });
  },

5、点击图片进行预览

   /**
    * 点击图片进行预览
    */
  previewImg: function (e) {
    var img = this.data.imagePath;
    // console.log(img);
    wx.previewImage({
      current: img, // 当前显示图片的http链接
      urls: [img] // 需要预览的图片http链接列表
    });
  },

6、适配不同屏幕大小的canvas

    /**
     * 适配不同屏幕大小的canvas
     * @return 返回设备信息宽高
     */
    setCanvasSize: function() {
        var size = {};
        try {
            var res = wx.getSystemInfoSync();
            var scale = 750 / 686; //不同屏幕下canvas的适配比例 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;
    },