近在开发一款微信小程序,有一个功能需要在微信前端生成多个二维码,
我这里要讲一下我使用的插件,以及他们在项目中的应用。
基于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)
}
})