如何在uniapp中实现二维码生成功能

官方文档:https://uqrcode.cn/doc。

github地址:https://github.com/Sansnn/uQRCode。

npm地址:https://www.npmjs.com/package/uqrcodejs。

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

javascript 复制代码
<canvas canvas-id="myCanvas" style="width: 200px;height: 200px;"></canvas>
javascript 复制代码
import UQRCode from '@/uni_modules/Sansnn-uQRCode/js_sdk/uqrcode/uqrcode.js';
javascript 复制代码
let qr = new UQRCode();
// 设置二维码内容
qr.data = 'https://uqrcode.cn/doc'
// 设置二维码大小,必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas上下文
let canvasContext = uni.createCanvasContext('myCanvas', this); // 如果是组件,this必须传入
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();
相关推荐
狼性书生7 小时前
uniapp实现的简约美观的星级评分组件
前端·uni-app·vue·组件
Jiaberrr14 小时前
uniapp 安卓 APP 后台持续运行(保活)的尝试办法
android·前端·javascript·uni-app·app·保活
不老刘14 小时前
uniapp+vue3实现CK通信协议(基于jjc-tcpTools)
前端·javascript·uni-app
疯狂的沙粒16 小时前
uni-app 如何实现选择和上传非图像、视频文件?
前端·javascript·uni-app
^Rocky16 小时前
uniapp 集成腾讯云 IM 富媒体消息(地理位置/文件)
uni-app·腾讯云·媒体
$程16 小时前
Uniapp 二维码生成与解析完整教程
前端·uni-app
tryCbest16 小时前
UniApp系列
uni-app·web
iOS阿玮18 小时前
社交的本质是价值交换,请不要浪费别人的时间。
uni-app·app·apple
monika_yu18 小时前
uniapp 开发ios, xcode 提交app store connect 和 testflight内测
uni-app
大阳光男孩20 小时前
Vue3 + UniApp 蓝牙连接与数据发送(稳定版)
uni-app