Vue+Ionic调用条码扫描相机触发页面重载问题求助

1. 修正组件内的调用方式（避免上下文丢失） #

使用async/await替代回调，正确注入插件实例并处理权限逻辑，同时禁用插件默认的结果弹窗避免触发WebView变化：

<template>
  <ion-button @click="scanBarcode">扫描条码</ion-button>
</template>

<script setup>
import { ref, inject, nextTick } from 'vue';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';
import { Platform } from '@ionic/vue';

const platform = inject(Platform);
const barcodeScanner = inject(BarcodeScanner);
const scannedResult = ref('');

const scanBarcode = async () => {
  try {
    // 检查并请求相机权限
    const permissionStatus = await barcodeScanner.checkPermission();
    if (!permissionStatus.granted) {
      await barcodeScanner.requestPermission();
    }

    // 执行扫描，配置参数规避WebView冲突
    const result = await barcodeScanner.scan({
      showTorchButton: true,
      prompt: '请将条码对准扫描框',
      resultDisplayDuration: 0
    });

    // 用nextTick确保Vue更新时机正确
    await nextTick();
    scannedResult.value = result.text;
    console.log('扫描结果:', scannedResult.value);
  } catch (error) {
    console.error('扫描失败:', error);
  }
};
</script>

2. 调整Capacitor WebView配置 #

修改capacitor.config.ts，禁用可能触发WebView重载的设置：

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.your.app.id',
  appName: 'YourAppName',
  webDir: 'dist',
  server: {
    androidScheme: 'https',
    cleartext: true
  },
  android: {
    webView: {
      disableWebViewReloadOnBackground: true,
      permissions: ['CAMERA']
    },
    allowMixedContent: true
  }
};

export default config;

3. 完善AndroidManifest权限配置 #

在android/app/src/main/AndroidManifest.xml中添加必要权限和Android 11适配：

<!-- 相机基础权限 -->
<uses-permission android:name="android.permission.CAMERA" />
<uses-feature android:name="android.hardware.camera" />
<uses-feature android:name="android.hardware.camera.autofocus" />

<!-- Android 11+ 相机访问查询配置 -->
<queries>
  <intent>
    <action android:name="android.media.action.IMAGE_CAPTURE" />
  </intent>
</queries>

4. 规避组件路由/生命周期冲突 #

• 避免用v-if动态销毁重建扫描组件，改用v-show（如果需要隐藏）
• 将扫描逻辑封装为全局组合式函数，脱离组件上下文：

// composables/useBarcodeScanner.js
import { inject } from 'vue';
import { BarcodeScanner } from '@ionic-native/barcode-scanner/ngx';

export const useBarcodeScanner = () => {
  const barcodeScanner = inject(BarcodeScanner);

  const scan = async () => {
    try {
      const permissionStatus = await barcodeScanner.checkPermission();
      if (!permissionStatus.granted) {
        await barcodeScanner.requestPermission();
      }
      return await barcodeScanner.scan({ resultDisplayDuration: 0 });
    } catch (err) {
      throw new Error('扫描错误: ' + err.message);
    }
  };

  return { scan };
};

组件内调用示例：

<script setup>
import { useBarcodeScanner } from '@/composables/useBarcodeScanner';
import { ref, nextTick } from 'vue';

const { scan } = useBarcodeScanner();
const scannedResult = ref('');

const handleScan = async () => {
  try {
    const result = await scan();
    await nextTick();
    scannedResult.value = result.text;
  } catch (err) {
    console.error(err);
  }
};
</script>

5. 替代方案：纯Web端扫描库 #

如果原生插件冲突无法解决，使用@zxing/library在WebView内实现扫描，完全规避原生插件的WebView重载问题：

<template>
  <ion-button @click="toggleScan">{{ isScanning ? '停止扫描' : '开始扫描' }}</ion-button>
  <video ref="videoElement" style="width: 100%; max-height: 60vh; display: block; margin: 0 auto;" v-if="isScanning"></video>
  <p v-if="scannedResult">扫描结果: {{ scannedResult }}</p>
</template>

<script setup>
import { ref, onUnmounted } from 'vue';
import { BrowserMultiFormatReader } from '@zxing/library';

const videoElement = ref(null);
const isScanning = ref(false);
const scannedResult = ref('');
let codeReader = null;

const toggleScan = () => {
  isScanning.value ? stopScan() : startScan();
};

const startScan = async () => {
  try {
    // 请求后置摄像头权限
    const stream = await navigator.mediaDevices.getUserMedia({
      video: { facingMode: 'environment' }
    });

    codeReader = new BrowserMultiFormatReader();
    isScanning.value = true;
    videoElement.value.srcObject = stream;

    // 开始扫描并处理结果
    codeReader.decodeFromVideoElement(videoElement.value, (result) => {
      if (result) {
        scannedResult.value = result.text;
        stopScan();
      }
    });
  } catch (err) {
    console.error('相机权限被拒绝或设备不支持:', err);
    isScanning.value = false;
  }
};

const stopScan = () => {
  if (codeReader) codeReader.reset();
  videoElement.value?.srcObject?.getTracks().forEach(track => track.stop());
  isScanning.value = false;
};

onUnmounted(() => stopScan());
</script>

内容的提问来源于stack exchange，提问作者Marcelo Andrade