@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 | 点击事件 | - |