微信小程序生成二维码的两种方式
2020/11/10
第一种,利用网络api自动生成
<image class="xin-erma" src="{{'https://api.pwmqr.com/qrcode/create/?url='+detail.wechat_code}}" wx:if="{{detail.wechat_code}}"></image>
url后可跟核销码或者文字,链接之类
第二种,利用weapp-qrcode.js插件本地生成
此插件在https://github.com/davidshimjs/qrcodejs,可自行下载
使用方式:
var QRCode = require('../../../utils/weapp-qrcode.js');onload:function(option){ var qrcode = new QRCode(`canvas`, { text: res.data.data.wechat_code,//核销码或者其他都可以 width: this.toPx(340), height: this.toPx(340), padding: 15, colorDark: "#000000", colorLight: "#ffffff", correctLevel: QRCode.CorrectLevel.H, callback: (res) => {} }); var ctx = wx.createCanvasContext(`canvas`); ctx.draw(true);}, // 单位换算 //生成的二维码单位是px,微信小程序单位是rpx,需要计算转换toPx(rpx) { // rpx转px var sysInfo = wx.getSystemInfoSync() var screenWidth = sysInfo.screenWidth this.factor = screenWidth / 750; return rpx * this.factor;},//详细使用步骤请自行前往github地址上自行查看 <canvas class='canvas' canvas-id='canvas'></canvas>
注意:canvas有默认大小,需要自行设置大小。