微信小程序和支付宝小程序生成二维码

描述：前端生成二维码

一、页面

<canvas type="2d" style="width: 312px; height: 312px;" id="myQrcode"></canvas>
1

二、微信小程序

安装 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)
        }
      })
    })
  })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

三、支付宝小程序

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
2
3
4
5
6
7
8
9
10
11
12
13
14

四、注意：

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