效果图如下

本文将详细介绍如何使用 nvue + Barcode 模块实现一个完整的自定义扫码页面。
为什么选择 nvue？
因为uniapp中这个组件的限制

配置：
首先需要在 `manifest.json` 中启用 Barcode 模块：
 

{
  "app-plus": {
    "modules": {
      "Barcode": {},
      "Camera": {}
    },
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.CAMERA\"/>"
        ]
      }
    }
  }
}

2. pages.json 配置

在 `pages.json` 中注册页面并隐藏导航栏：


{
  "path": "pages/Shops/code",
  "style": {
    "navigationBarTitleText": "扫一扫",
    "app-plus": {
      "titleNView": false
    }
  }
}

页面完整代码

<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
    
    <!-- 自定义导航栏 -->
    <view class="nav-bar">
      <view class="nav-back" @click="goBack">
        <uni-icons type="left" size="18" color="#333333"></uni-icons>
      </view>
      <text class="nav-title">订单核销</text>
      <view class="nav-placeholder"></view>
    </view>
    
    <!-- 扫码区域容器 -->
    <view class="scan-container">
      <!-- Barcode 组件 -->
      <barcode 
        ref="barcode" 
        class="barcode" 
        :autostart="false" 
        @marked="onMarked" 
        @error="onError">
      </barcode>
      
      <!-- 底部提示 -->
      <view class="bottom-tip" @click="goToManualInput">
        <text class="tip-text">无法识别？试试</text>
        <text class="tip-link">手动输入核销码</text>
      </view>
    </view>
  </view>
</template>

Js逻辑代码

export default {
  data() {
    return {
      statusBarHeight: 0,
      isScanning: false // 防止重复扫码
    }
  },
  
  created() {
    // 获取状态栏高度，适配不同机型
    const systemInfo = uni.getSystemInfoSync();
    this.statusBarHeight = systemInfo.statusBarHeight || 0;
  },
  
  onReady() {
    // 页面首次加载时启动扫码
    this.startScan();
  },
  
  onShow() {
    // 页面显示时重新启动扫码（处理返回场景）
    this.isScanning = false;
    this.startScan();
  },
  
  methods: {
    // 启动扫码
    startScan() {
      this.$nextTick(() => {
        try {
          const barcode = this.$refs.barcode;
          if (barcode && barcode.start) {
            barcode.start();
            console.log('扫码已启动');
          }
        } catch (e) {
          console.log('启动扫码失败：', e);
        }
      });
    },
    
    // 扫码成功回调
    onMarked(e) {
      // 防止重复处理
      if (this.isScanning) {
        return;
      }
      this.isScanning = true;
      
      const result = e.detail.code;
      console.log('扫码结果：', result);
      
      // 处理扫码结果
      this.handleScanResult(result);
      
      // 延迟重置标志
      setTimeout(() => {
        this.isScanning = false;
      }, 2000);
    },
    
    // 扫码失败回调
    onError(e) {
      console.log('扫码错误：', e);
      uni.showToast({
        title: '扫码失败',
        icon: 'none'
      });
    },
    
    // 处理扫码结果
    handleScanResult(code) {
      // 跳转到处理页面或调用接口
      uni.navigateTo({
        url: '/pages/result?code=' + code
      });
    },
    
    // 手动输入
    goToManualInput() {
      uni.navigateTo({
        url: '/pages/manualInput'
      });
    },
    
    // 返回
    goBack() {
      uni.navigateBack({});
    }
  }
}

关于css就不公布了，大家可以自己定义。

遇到的一些问题：
1.页面黑屏（考虑Barcode 组件未正确启动）

// 确保在 $nextTick 中启动
this.$nextTick(() => {
  const barcode = this.$refs.barcode;
  if (barcode && barcode.start) {
    barcode.start();
  }
});

2.扫码后卡死（扫码成功后组件未停止，继续占用摄像头）

- 使用 `isScanning` 标志防止重复处理

- 在 `onShow` 中重置状态

3.返回后无法扫码（autostart 只在首次加载时生效）

onShow() {

  this.startScan(); // 手动重启

}