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