qrcode

用于支付宝小程序的二维码组件

使用

<canvas id="my-canvas"></canvas>

import Qrcode from "@ka-utils/qrcode";

Page({
   // 页面加载
    console.info(`Page onLoad with query: ${JSON.stringify(query)}`);
    const size = this.setCanvasSize({ uiWidth: 210 })
    const logoSize = this.setCanvasSize({ uiWidth: 48 })
    const maginSize = this.setCanvasSize({ uiWidth: 24 })
    // 要使用整数，否则会虚
    const width = Math.round(size.w - maginSize.w);
    const xoffset = Math.round(maginSize.w / 2);
    const imgOffset = Math.round((size.w - logoSize.w) / 2);
    const logoWidth = Math.round(logoSize.w);
    drawQrcode({
      width: width,
      height: width,
      canvasId: 'mycanvas',
      qrcode: 'http://www.baidu.com',
      $this: this,
      x: xoffset,
      y: xoffset,
      image: {
        imageResource: 'https://img.alicdn.com/imgextra/i2/O1CN01DACTtH1aXJCowpB5x_!!6000000003339-2-tps-72-72.png',
        dx: imgOffset,
        dy: imgOffset,
        dWidth: logoWidth,
        dHeight: logoWidth,
      }
    })
});



  //适配不同屏幕大小的canvas，scale 中为设计稿宽度除以二维码宽度得到的比例，返回的值为二维码实际的宽 === 高
   //适配不同屏幕大小的canvas,width 为设计稿宽度
  setCanvasSize({ uiWidth }) {
    let size = {};
    try {
      const res = my.getSystemInfoSync();
      console.log('res is', res)
      const scale = 375 / uiWidth; //不同屏幕下canvas的适配比例；设计稿是750宽
      const width = res.windowWidth / scale;
      const height = width; //canvas画布为正方形
      size.w = width;
      size.h = height;
    } catch (e) {
      // Do something when catch error
      console.log("获取设备信息失败" + e);
    }
    console.log('size is', size)
    return size;
  },

| 属性 | 是否必传 | 解释 | 类型 | | --- | --- | --- | --- | | qrcode | 是 | 绘制的二维码所对应的 url | string | | canvasId | 是 | axml 上的 canvas 标签的 id | string | | width | 是 | 绘制出的二维码的宽 | number | | height | 是 | 绘制出二维码的高 | number | | image | 否 | 中间logo标志 | obj | | x | 否 | 偏移量 | number | | y | 否 | 偏移量 | number | | $this | 是 | 该页面的 this 指向 | object |

开发

1. yarn 或者 ayarn（阿里内网）安装依赖
2. 小程序 IDE 打开组件（下载地址）

更多命令

• miapp newbranch: 新建分支
• miapp push: 提交代码
• miapp prepub: 预发（发布 beta 版本）
• miapp publish: 正式发布