uniapp中使用qrcodejs2生成二维码

一般做移动端项目时,总会遇到生成海报,在海报中显示二维码。今天正好遇到就记录下。

第一步 安装依赖

npm install qrcodejs2 --save

第二步 页面引用

	import QRCode from 'qrcodejs2';
	components: {
		QRCode 
	},

第三步 view标签使用

<div class="codeImg" ref="qrCodeUrl"></div>

注:在uniapp中一般都是使用view标签,但是这时候就要用div标签了,不然页面中二维码不显示。

第四步 js

mounted() {
	this.createQrcode()
},
methods:{
createQrcode() {
		var that = this
		setTimeout(() => {
			 var qrcode = new QRCode(that.$refs.qrCodeUrl, {
				 text: 'http://csss-epc.net/#/pages/review/index', // 需要转换为二维码的内容也可以是链接
					width: 100,
					height: 100,
					colorDark: '#000000',
					colorLight: '#ffffff' ,
			  })
		}, 0)
	 },
}

以上四步就能实现在uniapp中生成二维码了,稍晚点会把在uniapp中使用html2canvas将页面生成base64图片整理出来。还在搬砖,就简单写到这里了。

你可能感兴趣的:(uni-app,uni-app)