如何在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();
相关推荐
特创数字科技5 小时前
uniapp 图片全能处理|全平台支持(鸿蒙、安卓、苹果、web),实现九宫格、水印、滤镜、压缩、拼图
uni-app
2501_916007476 小时前
苹果应用商店App Store上架费用标准及原因解析
android·ios·小程序·https·uni-app·iphone·webview
00后程序员张1 天前
苹果App Store上架指南:费用、原理与步骤详解
android·ios·小程序·https·uni-app·iphone·webview
特创数字科技1 天前
【uni-app x】告别系统相机限制!三端通用自定义相机组件:任意布局、静默拍照、录像、水印叠加、连拍回图一次搞定
前端·数码相机·uni-app
Martin -Tang1 天前
uniapp app嵌套webview 弹窗方式
android·ios·uni-app
郑州光合科技余经理2 天前
同城电商系统:库存变更怎么同步到订单
java·开发语言·前端·后端·uni-app·php·ai编程
CHB3 天前
一文讲透原生渲染和自渲染
flutter·react native·uni-app
码兄科技8 天前
24小时自助健身房系统软件开发实战指南:功能设计与部署方案
java·spring boot·uni-app
2501_916007478 天前
苹果商店iOS应用上架费用全面解析:开发者计划与审核费用计算
android·ios·小程序·https·uni-app·iphone·webview
2501_916008898 天前
如何实现iOS App代码混淆:SwiftShield使用指南
android·ios·小程序·https·uni-app·iphone·webview