uni-app在微信小程序、H5 和 App 中实现扫码功能

在 uni-app 中实现扫码功能，可以通过调用不同平台提供的扫码 API 来实现。下面分别介绍在微信小程序、H5 和 App 中如何实现扫码功能。

1. 微信小程序

在微信小程序中，你可以使用 wx.scanCode 接口来实现扫码功能。

示例代码

在你的 .wxml 文件中，添加一个按钮：

<button bindtap="scanCode">扫码</button>

在对应的 .js 文件中，编写扫码逻辑：

Page({
  data: {},
  scanCode: function () {
    wx.scanCode({
      success: (res) => {
        console.log(res);
        if (res.result) {
          // 处理扫码结果
          console.log('扫码结果：', res.result);
        }
      },
      fail: function (err) {
        console.error('扫码失败：', err);
      }
    });
  }
});

2. H5

在 H5 页面中，可以使用 JavaScript 的 navigator.mediaDevices.getUserMedia 方法结合摄像头来实现扫码功能。通常会借助第三方库，如 qr-scanner 或 scannerjs。

示例代码

首先安装 qr-scanner：

npm install qr-scanner

然后在你的 .vue 文件中引入并使用：

import QRScanner from 'qr-scanner';
import 'qr-scanner/dist/main.css';

export default {
  data() {
    return {
      scanner: null,
      video: null,
      result: ''
    };
  },
  mounted() {
    this.initScanner();
  },
  methods: {
    async initScanner() {
      const video = document.getElementById('video');
      this.scanner = new QRScanner(video, (result) => {
        console.log('Scanned:', result);
        this.result = result;
      });

      try {
        await this.scanner.start();
      } catch (error) {
        console.error('Error starting scanner:', error);
      }
    }
  }
};

在模板中添加视频流显示区域：

<template>
  <div>
    <video id="video" autoplay playsinline></video>
    <p v-if="result">扫描结果：{{ result }}</p>
  </div>
</template>

3. App

对于 App 端（如 Android 和 iOS），你可以使用 uni-app 提供的 uni.scanCode 方法来实现扫码功能。

示例代码

在你的 .vue 文件中添加一个按钮：

<button @click="scanCode">扫码</button>

在对应的 .js 文件中编写扫码逻辑：

export default {
  methods: {
    scanCode() {
      uni.scanCode({
        success: (res) => {
          console.log(res);
          if (res.result) {
            // 处理扫码结果
            console.log('扫码结果：', res.result);
          }
        },
        fail: (err) => {
          console.error('扫码失败：', err);
        }
      });
    }
  }
};

总结

以上就是在 uni-app 中实现扫码功能的方法。你可以根据不同的目标平台选择合适的方式来实现扫码功能。在实际应用中，你可能还需要处理更多的边缘情况，比如用户拒绝授权访问摄像头、网络问题等。