当前位置：首页 > news >正文

uniapp 生成二维码图片[APP+H5+小程序等全端适配]

news 2025/10/31 14:22:45

uniapp 生成二维码图片[APP+H5+小程序等全端适配]

前言
引入环境（安装）
- 引入组件（import 和 require）
- 开始使用
- - 我的部分
  - 官方部分
- 最终效果
全端二维码？这波操作直接 “抄作业” 就行！

前言

通过npm安装，成功后即可使用import或require进行引用。（当然这里请选择你项目的安装方式，pnpm 、yarn 等）

引入环境（安装）

通过npm安装，成功后即可使用import或require进行引用。（当然这里请选择你项目的安装方式，pnpm 、yarn 等）

# npm安装
npm install uqrcodejs
# 或者
npm install @uqrcode/js

在这里插入图片描述
安装完成后，在页面中引入uqrcode.js文件即可开始使用

引入组件（import 和 require）

通过import引入（直接在使用的文件中引入）

// npm安装
import UQRCode from 'uqrcodejs'; // npm install uqrcodejs
// 或者
import UQRCode from '@uqrcode/js'; // npm install @uqrcode/js

示例
在这里插入图片描述

Node.js通过require引入。

// npm安装
const UQRCode = require('uqrcodejs'); // npm install uqrcodejs
// 或者
const UQRCode = require('@uqrcode/js'); // npm install @uqrcode/js

开始使用

我的部分

如果想要查看官方给的原始代码请直接跳过我的部分

我的部分（我自己的，官方写法请跳过下面⬇️）

<!-- 视图部分 -->
<view @click="previewQrcode">	<canvas id="qrcode" canvas-id="qrcode" style="width: 100px;height: 100px;"></canvas>
</view>

下面分别是数据部分和逻辑部分
我使用了payLoadUrl用于灵活定义生成二维码的链接地址

// 引入uni官方二维码生成组件
import UQRCode from 'uqrcodejs'
export default {
data() {return {isonlinePay:false,  //可选，用于隐藏二维码，视图中没使用，可自定义payLoadUrl:'https://uqrcode.cn/doc',  //生成二维码地址qrcodeTempPath: '',  // 可选：存储二维码临时图片路径}},methods: {// 生成二维码信息createQrCode() {const qrcodeSize = 100;// 获取uQRCode实例var qr = new UQRCode();// 设置二维码内容qr.data = this.payLoadUrl;// 设置二维码大小，必须与canvas设置的宽高一致qr.size = qrcodeSize;// 调用制作二维码方法qr.make();// 获取canvas上下文var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入// 设置uQRCode实例的canvas上下文qr.canvasContext = canvasContext;// 调用绘制方法将二维码图案绘制到canvas上qr.drawCanvas();},// 放大查看二维码previewQrcode() {// 将canvas转为临时图片路径uni.canvasToTempFilePath({canvasId: 'qrcode', // 与canvas的canvas-id一致success: (res) => {// 调用uni.previewImage预览图片//this.qrcodeTempPath = res.tempFilePath //可选-图片缓存uni.previewImage({urls: [res.tempFilePath], // 预览图片的临时路径数组current: res.tempFilePath, // 当前显示的图片路径fail: (err) => {uni.showToast({ title: '预览失败', icon: 'none' });}});},fail: (err) => {uni.showToast({ title: '获取二维码图片失败', icon: 'none' });}}, this); // 传入当前组件上下文（必填）},}
}

当然上面的方法也是有一定缺陷的，因为每次点击查看二维码都会重新运行一次canvas转存，会消耗图片资源，所以大家也可以启用替换下面的微调版，并使用qrcodeTempPath参数缓存。

// 放大查看二维码
previewQrcode() {// 若已存在二维码临时路径，直接预览if (this.qrcodeTempPath !== '') {uni.previewImage({urls: [this.qrcodeTempPath],current: this.qrcodeTempPath,fail: (err) => {uni.showToast({ title: '预览失败', icon: 'none' });}});} else {// 若不存在临时路径，先将canvas转为临时路径再预览uni.canvasToTempFilePath({canvasId: 'qrcode',success: (res) => {uni.previewImage({urls: [res.tempFilePath],current: res.tempFilePath,fail: (err) => {uni.showToast({ title: '预览失败', icon: 'none' });}});},fail: (err) => {uni.showToast({ title: '获取二维码图片失败', icon: 'none' });}}, this);}
}

官方部分

HTML部分(不用奇怪标签，因为是基于canvas封装的)

<canvas id="qrcode" width="200" height="200"></canvas>

大家可以根据自己的实际使用情况来调整大小、使用的标签
在这里插入图片描述

JS部分（官方给的👈）

// 获取uQRCode实例
var qr = new UQRCode();
// 设置二维码内容
qr.data = "https://uqrcode.cn/doc";
// 设置二维码大小，必须与canvas设置的宽高一致
qr.size = 200;
// 调用制作二维码方法
qr.make();
// 获取canvas元素
var canvas = document.getElementById("qrcode");
// 获取canvas上下文
var canvasContext = canvas.getContext("2d");
// 设置uQRCode实例的canvas上下文
qr.canvasContext = canvasContext;
// 调用绘制方法将二维码图案绘制到canvas上
qr.drawCanvas();

最终效果

在这里插入图片描述

在这里插入图片描述
最终放大效果请以实际为准

全端二维码？这波操作直接 “抄作业” 就行！

😀其实搞 uniapp 全端生成二维码这事儿，真没想象中那么 “挠头”🙃～之前我也瞎琢磨过，怕 APP 和 H5 适配崩了，怕 canvas 转图浪费资源，结果用 uqrcodejs 走下来，安装、引入、画码三步搞定，连缓存优化版都给大家备好，直接拿捏🤏。
说白了，很多时候咱们卡壳不是因为难，就是缺个 “直接能用的方案”。要是这篇能帮你少翻几页文档、少踩两个小坑，别忘了给个一键三连呀～💖⭐🥰
观众老爷们的小支持，就是我下次扒更多实用小技巧的动力！
瑞思拜～咱们下次搞点新功能再见！😘
在这里插入图片描述