1.5.1 • Published 1 year ago
@wines/qrcode v1.5.1
@wines/qrcode
Qrcode 二维码
用于展现二维码。
使用指南
在 page.json 中引入组件
{
"navigationBarTitleText": "wux-qrcode",
"usingComponents": {
"wux-qrcode": "@wines/qrcode"
}
}
示例
<view class="page">
<view class="page__hd">
<view class="page__title">Qrcode</view>
<view class="page__desc">二维码</view>
</view>
<view class="page__bd">
<view class="sub-title">请输入文字,即时输入即时生成</view>
<wux-cell-group>
<wux-cell hover-class="none">
<wux-textarea
hasCount
rows="3"
placeholder="支持文本、网址和电子邮箱"
maxlength="300"
value="{{ value }}"
controlled
bind:change="onChange"
/>
</wux-cell>
</wux-cell-group>
<view class="sub-title">提示:Canvas 在微信中无法长按识别, 点击图片进入保存页面长按图片可以保存</view>
<view class="qrcode">
<wux-qrcode
id="wux-qrcode"
padding="{{ 20 }}"
data="{{ value }}"
fg-color="{{ fgColor }}"
width="200"
height="200"
bind:click="previewImage"
/>
</view>
</view>
</view>
import './index.less';
import { $wuxQrcode } from '@wines/qrcode';
Page({
data: {
value: 'https://github.com/wux-weapp/wux-weapp',
fgColor: 'black',
},
onChange(e) {
const value = e.detail.value;
const fgColor = this.randomColor();
this.setData({
value,
fgColor,
});
},
previewImage() {
// 在自定义组件下,当前组件实例的 this,以操作组件内 <canvas> 组件
const qrcode = $wuxQrcode('#wux-qrcode');
wx.canvasToTempFilePath(
{
// Cavans `2d` 需要传入canvas实例, 不需要canvasId (要传canvas实例,就是你获取的res[0].node)
canvas: qrcode.getCanvas(),
width: 200,
height: 200,
destWidth: 300,
destHeight: 300,
success: (res) => {
void wx.previewImage({
urls: [res.tempFilePath],
});
},
},
qrcode,
);
},
randomColor() {
const colorStr = Math.floor(Math.random() * 0xffffff)
.toString(16)
.toUpperCase();
const length = colorStr.length;
const prefixStr = '000000'.substring(0, 6 - length);
return `#${prefixStr}${colorStr}`;
},
});
API
Qrcode props
参数 | 类型 | 描述 | 默认值 |
---|---|---|---|
data | string | 文本内容 | - |
typeNumber | number | 类型 | -1 |
errorCorrectLevel | number | 误差校正等级 | 2 |
width | number | canvas 组件的宽度 | 200 |
height | number | canvas 组件的高度 | 200 |
fgColor | string | 前景色 | black |
bgColor | string | 背景色 | white |
borderPadding | number | 边框填充距离 | 15 |
borderSize | number | 边框粗细 | 2 |
borderColor | string | 边框线颜色 | white |
bind:click | function | 点击事件 | - |