@ka-utils/qrcode

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

开发

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

更多命令

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