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

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

• 前言
• 引入环境（安装）
• • [引入组件（import 和 require）](#引入组件（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 走下来，安装、引入、画码三步搞定，连缓存优化版都给大家备好，直接拿捏🤏。

说白了，很多时候咱们卡壳不是因为难，就是缺个 "直接能用的方案"。要是这篇能帮你少翻几页文档、少踩两个小坑，别忘了给个一键三连呀～💖⭐🥰

观众老爷们的小支持，就是我下次扒更多实用小技巧的动力！

瑞思拜～咱们下次搞点新功能再见！😘