微信小程序动态生成二维码

近在开发一款微信小程序，有一个功能需要在微信前端生成多个二维码,

我这里要讲一下我使用的插件，以及他们在项目中的应用。

基于canvas绘图制作二维码：https://github.com/demi520/wxapp-qrcode

首先,创建一个二维码样式代码

    二维码
      生成二维码
   

然后动态生成二维码的js文件

    二维码
      生成二维码
   
let QR = require('../../utils/qrcode.js')
Page({

  /**
   * 页面的初始数据
   */
  
  data: {
    placeholder:'http://www.baidu.com'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let size=this.setCanvasSize();
    let url=this.data.placeholder;
    this.createQRcode(url,'mycanvas',size.w,size.h)
  },
  createQRcode(url,canvasId,canvasWidth,canvasHeight){
    QR.qrApi.draw(url, canvasId, canvasWidth, canvasHeight)
  },
  setCanvasSize(){
    let size={};
    let res=wx.getSystemInfoSync();
    // console.log(res)
    let scale=686/750;
    let width=res.windowWidth*scale;
    let height=width;
    size.w=width;
    size.h=height;
    return size;
  },
  formSubmit(e){
    console.log(e.detail.value.url);
    console.log(this.data.placeholder);
    let url=e.detail.value.url||this.data.placeholder;
    wx.showToast({
      title: '生成中',
      icon:'loading',
      duration:2000
    })
    let that=this; 
    let timer=setTimeout(function(){
      let size = that.setCanvasSize();
      // console.log(url);
      that.createQRcode(url, 'mycanvas', size.w, size.h)
      wx.hideToast(timer);
    },2000)
  }
})