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

来源：互联网发布：并行程序设计书知乎编辑：程序博客网时间：2024/05/20 02:29

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

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

基于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)  }})

阅读全文

0 0