别再只用黑白块了！用uQRCode给你的UniApp二维码加个边框和标题（附完整代码）
在移动应用开发中，二维码早已超越了简单的信息传递功能，成为品牌展示和用户体验的重要组成部分。对于UniApp开发者来说，如何在保持二维码功能性的同时，赋予其独特的视觉识别度，是一个值得深入探讨的话题。
传统二维码生成方案往往止步于黑白方块的基本形态，而现代应用场景要求我们做得更多——电商推广需要突出品牌调性，会员系统需要强化视觉识别，活动页面需要吸引用户注意。本文将带你深入uQRCode的核心API，探索直接在二维码画布上绘制边框和标题的高效方案，避免先生成图片再合成的性能损耗。
1. uQRCode基础配置与环境搭建
1.1 安装与引入uQRCode
uQRCode作为一款轻量级二维码生成库，支持跨平台使用，特别适合UniApp开发环境。安装过程简单直接：
npm install @uqrcode/js # 或 yarn add @uqrcode/js在Vue组件中引入：
import UQRCode from '@uqrcode/js'1.2 基础二维码生成
创建一个基本的二维码只需几行代码：
<canvas id="qrcode" canvas-id="qrcode" style="width: 300px;height:300px;" />const qr = new UQRCode() qr.data = 'https://your-domain.com' qr.size = 300 qr.make() const ctx = uni.createCanvasContext('qrcode', this) qr.canvasContext = ctx qr.drawCanvas()关键参数说明：
| 参数 | 类型 | 说明 |
|---|---|---|
| data | string | 二维码包含的数据 |
| size | number | 二维码尺寸(px) |
| margin | number | 二维码边距 |
| foregroundColor | string | 前景色(默认#000) |
| backgroundColor | string | 背景色(默认#fff) |
2. 高级样式定制：超越黑白方块
2.1 自定义二维码外观
uQRCode提供了丰富的样式定制选项：
// 设置彩色二维码 qr.foregroundColor = '#FF5722' // 橙色前景 qr.backgroundColor = '#F5F5F5' // 浅灰背景 qr.dotScale = 0.9 // 点的大小比例 qr.typeNumber = 10 // 二维码类型样式定制技巧：
- 使用品牌主色作为前景色增强识别度
- 适当调整dotScale可改善扫描识别率
- 高容错率(typeNumber)适合复杂设计
2.2 添加Logo中心图案
qr.foregroundImageSrc = '/static/logo.png' // 本地路径 // 或 qr.foregroundImageSrc = 'https://example.com/logo.png' // 网络图片注意：网络图片需要先下载到本地，建议使用uni.downloadFile预处理
3. 边框与标题的进阶实现
3.1 绘制装饰性边框
直接在二维码画布上绘制边框，避免二次绘制带来的性能损耗：
// 配置对象 const config = { borderWidth: 10, borderColor: '#333', borderRadius: 8 } // 绘制圆角边框 function drawBorder(ctx, qr, config) { const { borderWidth, borderColor, borderRadius } = config const size = qr.size const hasMargin = qr.margin > 0 ctx.setFillStyle(borderColor) // 绘制四角 ctx.beginPath() ctx.arc(borderWidth/2 + borderRadius, borderWidth/2 + borderRadius, borderRadius, Math.PI, Math.PI*1.5) ctx.arc(size - borderWidth/2 - borderRadius, borderWidth/2 + borderRadius, borderRadius, Math.PI*1.5, Math.PI*2) ctx.arc(size - borderWidth/2 - borderRadius, size - borderWidth/2 - borderRadius, borderRadius, 0, Math.PI*0.5) ctx.arc(borderWidth/2 + borderRadius, size - borderWidth/2 - borderRadius, borderRadius, Math.PI*0.5, Math.PI) ctx.fill() // 绘制四边 ctx.fillRect(borderWidth/2 + borderRadius, borderWidth/2, size - borderWidth - borderRadius*2, borderWidth) ctx.fillRect(size - borderWidth/2 - borderWidth, borderWidth/2 + borderRadius, borderWidth, size - borderWidth - borderRadius*2) ctx.fillRect(borderWidth/2 + borderRadius, size - borderWidth/2, size - borderWidth - borderRadius*2, borderWidth) ctx.fillRect(borderWidth/2, borderWidth/2 + borderRadius, borderWidth, size - borderWidth - borderRadius*2) }3.2 添加动态标题文本
实现可配置位置的标题文字：
function drawTitle(ctx, config, qrSize) { const { qrcodeTitle, qrcodeTitlePosition, titleColor, titleSize } = config if (!qrcodeTitle) return ctx.setFontSize(titleSize || 16) ctx.setFillStyle(titleColor || '#000') ctx.setTextAlign('center') let yPosition switch(qrcodeTitlePosition) { case 'top': yPosition = 20 break case 'bottom': yPosition = qrSize + 25 break default: yPosition = qrSize / 2 } // 处理长文本自动换行 const maxWidth = qrSize * 0.8 const lineHeight = titleSize * 1.2 wrapText(ctx, qrcodeTitle, qrSize/2, yPosition, maxWidth, lineHeight) } function wrapText(ctx, text, x, y, maxWidth, lineHeight) { const words = text.split('') let line = '' let testLine = '' let lineCount = 0 for(let n = 0; n < words.length; n++) { testLine = line + words[n] const metrics = ctx.measureText(testLine) const testWidth = metrics.width if (testWidth > maxWidth && n > 0) { ctx.fillText(line, x, y) line = words[n] y += lineHeight lineCount++ } else { line = testLine } } ctx.fillText(line, x, y) }4. 完整实现与性能优化
4.1 整合所有功能的完整示例
export default { methods: { async generateCustomQRCode() { const config = { data: 'https://your-domain.com', size: 300, qrcodeTitle: '品牌专属二维码', qrcodeTitlePosition: 'top', titleColor: '#E74C3C', titleSize: 18, borderWidth: 8, borderColor: '#3498DB', borderRadius: 4, logo: '/static/logo.png' } // 初始化二维码 const qr = new UQRCode() qr.data = config.data qr.size = config.size qr.areaColor = '' // 透明背景 qr.drawReserve = true if (config.borderWidth > 0) { qr.margin = config.borderWidth + 5 } // 生成二维码基础图形 qr.make() // 获取画布上下文 const ctx = uni.createCanvasContext('qrcode', this) // 绘制白色背景 ctx.setFillStyle('#FFFFFF') ctx.fillRect(0, 0, config.size, config.size) // 绘制边框 if (config.borderWidth > 0) { drawBorder(ctx, qr, config) } // 绘制标题 if (config.qrcodeTitle) { drawTitle(ctx, config, qr.size) } // 设置Logo if (config.logo) { qr.foregroundImageSrc = config.logo } // 关联上下文并绘制 qr.canvasContext = ctx await qr.drawCanvas(false) // 保存到相册或进一步处理 ctx.draw(true, () => { uni.canvasToTempFilePath({ canvasId: 'qrcode', success: (res) => { uni.saveImageToPhotosAlbum({ filePath: res.tempFilePath }) } }) }) } } }4.2 性能优化实践
- 预加载资源：提前下载网络图片和字体
- 缓存生成结果：对相同内容二维码进行本地存储
- 延迟渲染：大数据量时使用setTimeout分步绘制
- 按需更新：只有配置变化时才重新生成
// 优化后的绘制方法 function optimizedDraw() { if (this.needRegenerate) { this.generateQRCode().then(() => { this.lastConfig = JSON.parse(JSON.stringify(this.currentConfig)) this.needRegenerate = false }) } else { this.redrawFromCache() } }在实际项目中，我发现合理设置qr.margin值对边框绘制至关重要。过小的margin会导致边框与二维码内容重叠，而过大则浪费画布空间。经过多次测试，建议将margin设置为borderWidth的1.2-1.5倍效果最佳。
