uniapp 生成二维码

一般常用到的二维码生成库,在使用的过程中,都需要设置到指定的dom元素上,

但是在 uniapp 项目中,想要像vue项目中一样,获取标签的dom元素是比较难操作的。所以在 uniapp 中生成二维码,就需要换一种思路,通过 canvas 画布,将二维码进行绘制并放置在 canvas 中进行展示。

uQRCode是一款基于Javascript环境开发的二维码生成插件,适用所有Javascript运行环境的前端应用和Node.js应用。 uQRCode可扩展性高,它支持自定义渲染二维码,可通过uQRCode API得到二维码绘制关键信息后,使用canvas、svg或js操作dom的方式绘制二维码图案。还可自定义二维码样式,如随机颜色、圆点、方块、块与块之间的间距等。

插件地址:uQRCode 全端二维码生成插件 支持nvue 支持nodejs服务端 - DCloud 插件市场

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

1. 安装
1.1 通过npm安装,成功后即可使用import或require进行引用。
javascript 复制代码
# npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js
1.2 通过项目开源地址获取uqrcode.js,下载uqrcode.js后,将其复制到您项目指定目录,在页面中引入uqrcode.js文件即可开始使用。
2. 引入

通过import引入。

javascript 复制代码
// npm安装
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js

Node.js通过require引入。

javascript 复制代码
// npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js
3. 使用
html 复制代码
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
javascript 复制代码
nextTick(() => {
			// 获取uQRCode实例
			const qr = new UQRCode();
			// 设置二维码内容
			qr.data = "https://uqrcode.cn/doc";
			// 设置二维码大小,必须与canvas设置的宽高一致
			qr.size = 200;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			const canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		})

二维码成功生成!

相关推荐
计算机学姐3 小时前
基于微信小程序的高校班务管理系统【2026最新】
java·vue.js·spring boot·mysql·微信小程序·小程序·mybatis
游戏开发爱好者84 小时前
HTTPS 内容抓取实战 能抓到什么、怎么抓、不可解密时如何定位(面向开发与 iOS 真机排查)
android·网络协议·ios·小程序·https·uni-app·iphone
哆啦A梦15887 小时前
点击Top切换数据
前端·javascript·vue.js
小光学长8 小时前
基于Vue的2025年哈尔滨亚冬会志愿者管理系统5zqg6m36(程序+源码+数据库+调试部署+开发环境)带论文文档1万字以上,文末可获取,系统界面在最后面。
前端·数据库·vue.js
@PHARAOH8 小时前
WHAT - 受控组件和非受控组件
前端·javascript·react.js
麦麦大数据9 小时前
D027 v2 vue+django+neo4j 基于知识图谱红楼梦问答系统 (新增问关系功能;新增知识节点和关系管理功能,neo4j增删改查功能)
vue.js·django·问答系统·知识图谱·neo4j·图谱管理·neo4j增删改查
专注前端30年9 小时前
【JavaScript】reduce 方法的详解与实战
开发语言·前端·javascript
菜鸟una10 小时前
【瀑布流大全】分析原理及实现方式(微信小程序和网页都适用)
前端·css·vue.js·微信小程序·小程序·typescript
专注前端30年11 小时前
2025 最新 Vue2/Vue3 高频面试题(10月最新版)
前端·javascript·vue.js·面试
Highcharts.js11 小时前
选择合适的组合:如何打造数据可视化的“黄金组合”
javascript·信息可视化·highcharts·交互式图表开发