百变鹏仔-专注前端行业精选
当前位置:网站首页 > 最近更新 > 前端开发 > JavaScript > 正文

uniapp中使用uQRCode生成二维码功能

作者:鹏仔先生日期:2023-07-12 19:45:11浏览:1665分类:JavaScript

之前写过在vue中生成二维码以及jq之类生成二维码,本次项目使用uniapp开发小程序,需要将参数生成一个二维码,那么顺带整理一下,方便下次使用。


首先,我们去uniapp插件市场下载

uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=1287


uniapp中使用uQRCode生成二维码功能


下载完以后,我们找到文件中 uqrcode.js 文件,拷贝到uniapp项目中,然后在需要生成二维码的组件引入

import UQRCode from "static/resource/uqrcode.js";


接着在HTML模块中需要显示二维码区域写入

<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>


最后methods中定义方法

init(){
	  // 获取uQRCode实例
	  var qr = new UQRCode();
	  // 设置二维码内容
	  qr.data = '鹏仔QQ344225443';
	  // 设置二维码大小,必须与canvas设置的宽高一致
	  qr.size = 200;
	  // 调用制作二维码方法
	  qr.make();
	  // 获取canvas上下文
	  var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
	  // 设置uQRCode实例的canvas上下文
	  qr.canvasContext = canvasContext;
	  // 调用绘制方法将二维码图案绘制到canvas上
	  qr.drawCanvas();
}


这样我们就完成了所有步骤,在页面中就可以看到加载出的二维码了,二维码内容自行动态传值即可。


上面鹏仔简单描述下使用方法,基本可以实现正常生成二维码需求,如需高级生成二维码,可查看官方文档 https://uqrcode.cn/doc/guide/getting-started.html


手机扫码访问

暂无评论,来添加一个吧。

取消回复欢迎 发表评论:

关灯