uni-app 實現二維碼生成

uni-app使用uqrcode實現二維碼生成

 

需要使用 uqrcode頁面引入該依賴：

import uQRCode from '@/components/js-uqrcode/uqrcode.js'

 

html代碼：

<view class="qrcodebg">
    <canvas canvas-id="qrcode" />
</view>

 

css代碼：

.qrcodebg canvas {
		margin-left: 25upx;
		width: 170upx;
		height: 170upx;
		border: #BBBBBB solid 5upx;
}

 

 

JS代碼：

make() {
    uQRCode.make({
			canvasId: 'qrcode',
			componentInstance: this,
			text: '二維碼內容',
			size: uni.upx2px(170),//二維碼大小
			backgroundColor: '#ffffff',//背景顏色
			foregroundColor: '#000000',
			fileType: 'png',
			correctLevel: uQRCode.defaults.correctLevel,
			success: res => {
						
			}
	})
},

 

在onLoad調用方法

onLoad() {
    this.make();
}