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图片整理出来。还在搬砖,就简单写到这里了。

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值