tui-qrcode 生成二维码 开源组件

介绍

生成二维码示例

引入

引入js库 weapp-qrcode.js，并确保路径正确 。

//uni-app
import qrCode from '@/libs/weapp-qrcode.js';

//微信小程序
const qrCode = require('../../../libs/weapp-qrcode.js');

代码演示

以下仅为部分介绍说明，具体使用请参考示例程序。

<!--uni-app-->
<canvas 
 :style="{ width: qrcode_w + 'px', height: qrcode_w + 'px' }"
 canvas-id="couponQrcode"
 id="couponQrcode"
></canvas>

// data 数据 及 方法
import qrCode from '@/libs/weapp-qrcode.js';
export default {
 data() {
 	return {
 		qrcode_w: uni.upx2px(240)
 	}
 },
 onReady() {
 	//需等canvas初始化完成才可执行方法
 	//couponQrcode 为canvas-id
 	new qrCode('couponQrcode', {
 		text: '二维码内容',
 		width: this.qrcode_w,
 		height: this.qrcode_w,
 		colorDark: '#333333',
 		colorLight: '#FFFFFF',
 		correctLevel: qrCode.CorrectLevel.H
 	});
 }
}

<!--微信小程序-->
<canvas style="width:{{qrcode_w}}px; height:{{qrcode_w}}px;" canvas-id="couponQrcode"></canvas>

// data 数据 及 方法
Page({
  data: {
    qrcode_w: 130
  },
  onLoad(){
 	  let sys = wx.getSystemInfoSync()
 	  const W = sys.windowWidth;
 	  const rate = 750.0 / W;
 	  //利用比例将260rpx转换为px
 	  const qrcode_w = 260 / rate;
 	  this.setData({
 		qrcode_w: qrcode_w
 	  });
  },
  onReady() {
 	//需等canvas初始化完成才可执行方法
 	//couponQrcode 为canvas-id
 	new qrCode('couponQrcode', {
 		text: '二维码内容',
 		width: this.qrcode_w,
 		height: this.qrcode_w,
 		colorDark: '#333333',
 		colorLight: '#FFFFFF',
 		correctLevel: qrCode.CorrectLevel.H
 	});
  }
})

// Make sure to add code blocks to your code group

TIP

使用此功能需自行在页面加入 canvas 标签，并设置canvas-id。

预览

特别说明

• 该组件为 开源组件，uni-app版所有用户均可免费使用。
• 微信小程序原生版仅开源至v1.4.2，后续版本需开通会员才可获取使用。

线上程序扫码预览

ThorUI组件库小程序码	H5二维码	ThorUI示例小程序码