如何在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();
相关推荐
天蒙蒙亮2 小时前
打安卓apk包+“应用商城”发布
前端·uni-app
ModyQyW4 小时前
vite-plugin-uni-pages 0.6:统一扫描规则,开发期少重启
前端·uni-app
Software攻城狮11 小时前
【uniapp和普通web 端开发的区别】
前端·uni-app·notepad++
2501_9159214311 小时前
iOS 实时日志怎么看?KeyMob 的日志过滤、崩溃报告与符号化
android·ios·小程序·https·uni-app·iphone·webview
郑州光合科技余经理1 天前
同城小程序开发:同一笔单在用户端和商家端各显示到哪
android·java·开发语言·前端·后端·uni-app·php
普通人61 天前
uniapp模版JS
开发语言·javascript·小程序·uni-app·1024程序员节
wiseyao12191 天前
uniapp scroll-view滚动到最后
前端·javascript·uni-app
红红谈说1 天前
同一套产品两个技术栈,双版本前端工程差异怎么收敛?
前端·uni-app·vue3·前后端分离·双版本维护·接口约定
hudie7652 天前
LikeShop 二开最常改的 5 个文件(附改前改后对比)
前端·uni-app·php·个人开发
梅雅达编程笔记2 天前
Day 17 | uni-app 小程序:前端从零搭建
微信小程序·typescript·uni-app·vue3·pinia·前端开发·全栈