uniapp识别图片中的二维码

admin 2026年03月15日 04:11 102 0

uniapp实现图片二维码识别，主要依赖原生API或第三方库，可通过uni.chooseImage获取本地图片，或结合camera组件实时拍摄，再调用uni.scanCode（支持扫码、相册识别）或jsQR等库解析二维码内容，H5端可调用浏览器摄像头，App端可集成原生扫码模块，小程序端则使用wx.scanCode，识别结果可返回文本信息，常用于扫码登录、支付、信息获取等场景，需注意跨平台兼容性及图片清晰度对识别准确率的影响。

Uniapp 实现图片中二维码识别：跨平台完整实践指南

在移动应用开发中,二维码识别已成为核心功能之一——从扫码登录、商品溯源到图片信息提取，均需高效解析图片中的二维码，Uniapp 作为跨端开发框架，支持一套代码编译至小程序、App、H5 等多端平台，但各平台的二维码识别实现机制存在差异，本文将系统阐述如何在 Uniapp 中实现**图片二维码识别**，覆盖微信小程序、原生 App 及 H5 三大场景，并提供可直接落地的代码示例。

实现方案全景分析

Uniapp 本身未内置二维码识别 API，需借助各平台原生能力或第三方库，根据目标平台特性，主流方案对比如下：

平台	实现方案	优点	缺点	适用场景
微信小程序	调用原生 API `wx.decodeQRCode`（需基础库 2.21.0+）	无需插件，官方原生支持	仅限微信环境	微信生态内应用
App（iOS/Android）	使用原生插件（如 DCloud 官方 `uni-barcode` 或第三方 ZXing 插件）	跨端兼容性强，识别效率高	需引入插件包，可能增加体积	需离线识别或高性能场景
H5	引入 JS 库（如 `jsQR`、`QRCode.js`）结合 FileReader API	纯前端实现，无需原生依赖	依赖浏览器能力，性能相对较低	轻量级 Web 应用

微信小程序：原生 API 实现方案

微信小程序自基础库 2.21.0 起提供 `wx.decodeQRCode` API，可直接解析本地图片或临时文件中的二维码，无需额外依赖。

核心实现步骤

调用 `wx.chooseImage` 选择图片（支持相册或相机）
使用 `wx.decodeQRCode` 解析图片路径，获取二维码内容

完整代码示例

```javascript // pages/scan/scan.js export default { methods: { // 选择图片并触发识别 async chooseImageAndDecode() { try { const res = await wx.chooseImage({ count: 1, sourceType: ['album', 'camera'] }); await this.decodeQRCode(res.tempFilePaths[0]); } catch (err) { wx.showToast({ title: '选择图片失败', icon: 'error' }); } },

// 二维码解析核心逻辑
decodeQRCode(filePath) {
  wx.showLoading({ title: '识别中...' });
  wx.decodeQRCode({
    path: filePath,
    success: (res) => {
      wx.hideLoading();
      wx.showToast({ title: `识别成功：${res.result}`, icon: 'success' });
      this.handleQRResult(res.result); // 处理识别结果
    },
    fail: (err) => {
      wx.hideLoading();
      wx.showToast({ title: '未识别到二维码', icon: 'error' });
      console.error('识别失败：', err);
    }
  });
},
// 结果处理（示例）
handleQRResult(result) {
  console.log('二维码内容：', result);
  // 调用业务逻辑...
}


<h4>关键注意事项</h4>
<ul>
  <li><strong>版本兼容性</strong>：需确保基础库 ≥ 2.21.0，可通过 `wx.getSystemInfoSync().SDKVersion` 动态检测</li>
  <li><strong>路径支持</strong>：`path` 参数支持临时文件（`wx.chooseImage` 返回）或本地文件（需通过 `wx.getFileSystemManager` 写入）</li>
  <li><strong>性能优化</strong>：大图片建议先压缩再识别，可调用 `wx.compressImage` 减少处理时间</li>
</ul>
<h3>App 端：原生插件实践方案</h3>
<p>App 端需通过原生插件扩展能力，推荐使用 DCloud 官方 `uni-barcode` 插件（基于 ZXing 库），支持 iOS/Android 双平台高效识别。</p>
<h4>插件安装与配置</h4>
<ol>
  <li>在 DCloud 插件市场搜索 <code>uni-barcode</code>，通过 HBuilderX 导入项目</li>
  <li>插件地址：<a href="https://ext.dcloud.net.cn/plugin?id=1288" target="_blank">https://ext.dcloud.net.cn/plugin?id=1288</a></li>
  <li>配置 manifest.json 权限声明：
    <pre><code>"app-plus": {
  "plugins": {
    "barcode": {
      "version": "1.0.6",
      "plus-name": "Barcode"
    }
  },
  "distribute": {
    "android": {
      "permissions": [
        "&lt;uses-permission android:name=\"android.permission.CAMERA\" /&gt;",
        "&lt;uses-permission android:name=\"android.permission.READ_EXTERNAL_STORAGE\" /&gt;"
      ]
    }
  }
}</code></pre>
  </li>
</ol>
<h4>完整实现代码</h4>
```javascript
// pages/scan/scan.js
export default {
  methods: {
    // 选择图片
    async chooseImage() {
      try {
        const [err, res] = await uni.chooseImage({
          count: 1,
          sourceType: ['album', 'camera']
        });
        if (!err) this.decodeQRCode(res.tempFilePaths[0]);
      } catch (error) {
        uni.showToast({ title: '选择失败', icon: 'none' });
      }
    },
    // 二维码识别
    decodeQRCode(filePath) {
      uni.showLoading({ title: '识别中...' });
      // 调用原生插件
      const barcode = uni.requireNativePlugin('barcode');
      barcode.decode({
        filePath: filePath,
        success: (res) => {
          uni.hideLoading();
          uni.showToast({ title: `识别成功：${res.result}`, icon: 'success' });
          console.log('二维码内容：', res.result);
        },
        fail: (err) => {
          uni.hideLoading();
          uni.showToast({ title: '识别失败', icon: 'error' });
          console.error('错误信息：', err);
        }
      });
    }
  }
}

H5 端：纯前端实现方案

H5 端可通过引入轻量级 JS 库实现，推荐使用 `jsQR`（专注于二维码识别）或 `QRCode.js`（含生成功能）。

核心实现步骤

安装依赖：npm install jsqr
通过 FileReader 读取图片文件
使用 Canvas 获取图片像素数据
调用 jsQR 解析二维码

完整实现代码

```javascript // pages/scan/scan.vue