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,
}
})
});
setCanvasSize({ uiWidth }) {
let size = {};
try {
const res = my.getSystemInfoSync();
console.log('res is', res)
const scale = 375 / uiWidth;
const width = res.windowWidth / scale;
const height = width;
size.w = width;
size.h = height;
} catch (e) {
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
: 正式发布