微信小程序和支付宝小程序生成二维码
描述：前端生成二维码
一、页面
<canvas type="2d" style="width: 312px; height: 312px;" id="myQrcode"></canvas>
二、微信小程序
安装 weapp-qrcode-canvas-2d
官方文档传送门
const query = wx.createSelectorQuery()
query.select(canvasId).fields({node: true,size: true}).exec((res) => {const canvas = res[0].node// 调用方法drawQrcode生成二维码drawQrcode({canvas: canvas,canvasId,width,padding: 0, // 码的白边background: '#ffffff',foreground: '#000000',text: '这里是二维码上的内容',}).then(res => {wx.canvasToTempFilePath({canvasId,canvas: canvas,x: 0,y: 0,width,height,destWidth: width,destHeight: height,success(res) {console.log('二维码临时路径：', res.tempFilePath)},fail(err) {console.error(err)}})})})
三、支付宝小程序
my.generateImageFromCode ({code: '这里是二维码上的内容',format: 'QRCODE',width,correctLevel: 'H',codeColor: '#e70b0b',backgroundColor: '#ffffff',success: function (res) {console.log('二维码临时路径：', res.image) // 这里是base64},fail: function (err) {console.log (err)}})
四、注意：
1、画出的二维码大小如果跟设计稿的一样，需要各种计算，为了方便，我这里是直接用的image显示的路径，然后设置image的样式
2、支付宝生成的是base64
3、ios微信小程序报错 (in promise) MiniProgramError
{“errMsg”:“canvasToTempFilePath:fail image size is 0x0”}
Object
解决：发现是canvas写了display: none
4、如果需要隐藏canvas， 不能用display:none, 也不能用transform(会占位), 我用的是fixed