# qrcode

![](https://img.shields.io/npm/v/@ka-utils/qrcode.svg?style=flat) ![](https://img.shields.io/npm/dt/@ka-utils/qrcode.svg?style=flat)

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

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

```javascript
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`（[阿里内网](https://web.npm.alibaba-inc.com/package/@ali/yarn)）安装依赖
1. 小程序 IDE 打开组件（[下载地址](https://opendocs.alipay.com/mini/ide/download)）



## 更多命令


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