原创内容，转载请注明原文网址：http://homeqin.cn/a/wenzhangboke/jishutiandi/weixinkaifa/2019/0122/351.html

常州微信公众号开发-二维码生成器canvas

draw: function (string, canvas, cavW, cavH, ecc) {
           ecclevel = ecc || ecclevel;
           canvas = canvas || _canvas;
           if (!canvas) {
               console.warn('No canvas provided to draw QR code in!')
               return;
           }
 
           var size =  Math.min(cavW, cavH);
 
           var frame = this.getFrame(string),
               ctx = wx.createContext(),
               px = Math.round(size / (width + 8));
 
           var roundedSize = px * (width + 8),
               offset = Math.floor((size - roundedSize) / 2);
           size = roundedSize;
           ctx.clearRect(0, 0, cavW, cavW);
           // ctx.setFillStyle('#ffffff');
           // ctx.rect(0, 0, size, size);
           ctx.setFillStyle('#000000');
                       // ctx.setLineWidth(1);
           for (var i = 0; i < width; i++) {
               for (var j = 0; j < width; j++) {
                   if (frame[j * width + i]) {   
                       ctx.rect(px * (4 + i) + offset, px * (4 + j) + offset, px, px);
                       // ctx.fill();
                   }
               }
           }
           ctx.fill();
                       wx.drawCanvas({
                         canvasId: canvas,
                         actions: ctx.getActions()
                   });
       }
   }
       module.exports = {
       qrApi: api
   }

// pages/main/index.js
var QR = require("../../utils/qrcode.js");
Page({
  data:{
    maskHidden:true,
    imagePath:'',
    placeholder:'wxapp-union.com'
  },
  onLoad:function(options){
    // 常州网站开发建设页面初始化 options为页面跳转所带来的参数
    var size = this.setCanvasSize();//动态设置画布大小
    var initUrl = "http://"+this.data.placeholder;
    this.createQrCode(initUrl,"mycanvas",size.w,size.h);
 
  },
  onReady:function(){
     
  },
  onShow:function(){
     
    // 页面显示
  },
  onHide:function(){
    // 页面隐藏
  },
 
  onUnload:function(){
    // 页面关闭
 
  },
  //适配不同屏幕大小的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方法，绘制游戏开发运营二维码图片
    QR.qrApi.draw(url,canvasId,cavW,cavH);
    var that = this;
    //二维码生成之后调用canvasToTempImage();延迟3s，否则获取图片路径为空
    var st = setTimeout(function(){
      that.canvasToTempImage();
      clearTimeout(st);
    },3000);
     
  },
  //获取临时缓存照片路径，存入data中
  canvasToTempImage:function(){
    var that = this;
    wx.canvasToTempFilePath({
      canvasId: 'mycanvas',
      success: function (res) {
          var tempFilePath = res.tempFilePath;
          console.log("********"+tempFilePath);
          that.setData({
              imagePath:tempFilePath,
          });
      },
      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链接列表
    })
  },
  formSubmit: function(e) {
    var that = this;
    var url = e.detail.value.url;
    url = url==''?('http://'+that.data.placeholder):('http://'+url);
    that.setData({
      maskHidden:false,
    });
    wx.showToast({
      title: '生成中...',
      icon: 'loading',
      duration:2000
    });
    var st = setTimeout(function(){
      wx.hideToast()
      var size = that.setCanvasSize();
      //绘制二维码
      that.createQrCode(url,"mycanvas",size.w,size.h);
      that.setData({
        maskHidden:true
      });
      clearTimeout(st);
    },2000)
     
  }
 
})


期间遇到的问题：
1、小程序是不支持fillRect()方法的，只能先rect(),然后fill();注意一定要把fill()放到for外面，不然会影响生成速度；
2、安卓和IDE依然不能预览图片问题，生成二维码没问题；
3、IDE不识别wx.canvasToTempFilePath()问题；
tips:输入时只需输入域名，http://常州手游开发会自动添加，如果是复制粘贴的链接请自行删除开头的http://
~~希望官方bug能早点修复