@qzsy/weapp-qrcode

现代化微信小程序条码和二维码生成库，基于 TypeScript + Vite 构建。

特性

• ✅ TypeScript: 完整的类型安全支持
• ✅ 现代构建: 使用 Vite 构建，支持 ES Module 和 CommonJS
• ✅ Canvas 2D API: 仅支持小程序新版 Canvas 2D API，性能更佳
• ✅ Promise: 支持 async/await 语法
• ✅ 高清渲染: 自动适配设备像素比
• ✅ 体积小巧: 移除旧版兼容代码，专注现代小程序

特色功能

🎯 专为现代小程序打造

• 仅支持 Canvas 2D API: 专注现代小程序，性能更佳
• TypeScript 原生支持: 完整的类型安全
• 现代化构建: 使用 Vite，支持 ES Module 和 CommonJS
• Promise 友好: 支持 async/await 语法

安装

npm install @qzsy/weapp-qrcode

使用方法

基础用法

import wxbarcode from '@qzsy/weapp-qrcode'

Page({
    async onLoad() {
        try {
            // 生成条码
            await wxbarcode.barcode('barcode', '1234567890123456789', 680, 200);
            
            // 生成二维码
            await wxbarcode.qrcode('qrcode', 'Hello World', 420, 420);
            
            // 生成二维码（带错误纠正级别）
            await wxbarcode.qrcode('qrcode-high', 'Hello World', 420, 420, {
                errorCorrectionLevel: 'H'
            });
        } catch (error) {
            console.error('生成失败:', error);
        }
    }
})

WXML 模板

<!-- 使用 Canvas 2D API -->
<canvas type="2d" id="barcode" style="width: 680rpx; height: 200rpx;"></canvas>
<canvas type="2d" id="qrcode" style="width: 420rpx; height: 420rpx;"></canvas>

API 文档

barcode(id, text, width, height)

生成 Code 128 条码

参数:

• id (string): Canvas 元素的 id
• text (string): 要编码的文本
• width (number): 条码宽度 (单位: rpx)
• height (number): 条码高度 (单位: rpx)

返回: Promise<void>

qrcode(id, text, width, height, options?)

生成二维码

参数:

• id (string): Canvas 元素的 id
• text (string): 要编码的文本
• width (number): 二维码宽度 (单位: rpx)
• height (number): 二维码高度 (单位: rpx)
• options (可选): 配置选项
  • errorCorrectionLevel ('L' | 'M' | 'Q' | 'H'): 错误纠正级别，默认 'L'

返回: Promise<void>

TypeScript 支持

import wxbarcode, { type BarcodeOptions, type QRCodeOptions } from '@qzsy/weapp-qrcode';

// 类型安全的使用方式
const options: Partial<QRCodeOptions> = {
  errorCorrectionLevel: 'H'
};

await wxbarcode.qrcode('my-qrcode', 'Hello TypeScript', 400, 400, options);

错误处理

try {
  await wxbarcode.barcode('barcode', 'test', 400, 200);
} catch (error) {
  console.error('条码生成失败:', error);
  // 处理错误情况
}

示例代码

查看 example/ 目录下的完整小程序示例。

从其他包迁移

1. 更新 WXML: 确保使用 Canvas 2D API

   <!-- 旧版本 -->
   <canvas canvas-id="barcode" />
      
   <!-- 新版本 -->
   <canvas type="2d" id="barcode" />

2. 使用 async/await: 所有方法现在都是异步的

   // 旧版本
   wxbarcode.barcode('barcode', 'test', 400, 200);
      
   // 新版本
   await wxbarcode.barcode('barcode', 'test', 400, 200);

3. TypeScript 支持: 如果使用 TypeScript，可获得完整类型支持

浏览器兼容性

• 微信小程序基础库 2.9.0+
• 支持 Canvas 2D API 的小程序环境

开发

# 安装依赖
npm install

# 开发模式
npm run dev

# 构建
npm run build

# 类型检查
npm run type-check

# 代码检查
npm run lint

许可证

MIT

更新日志

v1.0.0

• 🎉 TypeScript 原生支持
• 🎉 使用 Vite 现代化构建
• 🎉 仅支持 Canvas 2D API
• 🎉 Promise/async 支持
• 🎉 完整的类型定义
• 🎉 更小的包体积