百变鹏仔-专注前端行业精选
uniapp中使用uQRCode生成二维码功能
作者:鹏仔先生日期:2023-07-12 19:45:11浏览:2436分类:JavaScript
之前写过在vue中生成二维码以及jq之类生成二维码,本次项目使用uniapp开发小程序,需要将参数生成一个二维码,那么顺带整理一下,方便下次使用。
首先,我们去uniapp插件市场下载
uni-app插件市场地址:https://ext.dcloud.net.cn/plugin?id=1287
下载完以后,我们找到文件中 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
手机扫码访问
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 07-02 微信小程序判断是安卓还是苹果
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 06-25 uniapp页面跳转的几种方式
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
- 01-19 elementui多选上传 before-upload 格式效验错误总会触发before-remove (elementui多选上传on-success只执行了一次,只上传成功了一条)
暂无评论,来添加一个吧。