yixiaof 2019-09-05
wxml
<canvas style="width: 686rpx;height: 686rpx;background:#f1f1f1;" canvas-id="qrcCanvas"/> <input value='{{qrcStr}}' bindblur="onQrcStrBlur" type="text" maxlength="255" />
js
data:{ qrStr:'xxx' 需要生成字段 canvasId: "qrcCanvas",//需要绘画的元素 } //适配不同屏幕大小的canvas setCanvasSize(){ 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(str,canvasId,cavW,cavH){ //调用插件中的draw方法,绘制二维码图片 qrCode.api.draw(str,canvasId,cavW,cavH); }, //获取input输入的值 onQrcStrBlur(e) { this.setData({qrcStr: e.detail.value}); }, //在 onReady调用 onReady: function() { let size = this.setCanvasSize();//动态设置画布大小 this.createQrCode(this.data.qrcStr, this.canvasId, size.w, size.h); },