百变鹏仔-专注前端行业精选
uniapp中使用uQRCode生成二维码功能
作者:鹏仔先生日期:2023-07-12 19:45:11浏览:1175分类: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
手机扫码访问
猜你还喜欢
- 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只执行了一次,只上传成功了一条)
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 09-12 js正则过滤金额输入时限制只能输入数字与1个小数点,且0开头第二位则不能为0
- 07-12 uniapp中使用uQRCode生成二维码功能
- 07-19 解决谷歌浏览器跨域问题has been blocked by CORS policy: The request client is not a secure context and the resou
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
- 07-13 vue中实现文件批量打包压缩下载(以及下载跨域问题分析)
暂无评论,来添加一个吧。