iOS更新后Cordova+Quasar应用vue-barcode-reader扫描器空白屏故障

近期iOS系统更新后，基于Quasar框架构建的Cordova iOS应用，在使用vue-barcode-reader插件打开条码扫描器时，会额外弹出空白屏，导致扫描功能无法正常使用。

可能的解决方案 #

1. 升级插件并排查适配问题 #

• 执行 npm update vue-barcode-reader 将插件升级至最新版本，确认是否已修复iOS新版本适配问题
• 查看插件官方仓库的issue列表，确认是否有同类问题及官方给出的临时修复方案

2. 调整Cordova配置项 #

iOS更新后WebView的权限与渲染逻辑可能发生变化，修改config.xml：

• 强制使用WKWebView并调整媒体播放相关配置：

<preference name="WKWebViewOnly" value="true" />
<preference name="AllowInlineMediaPlayback" value="true" />
<preference name="MediaPlaybackRequiresUserAction" value="false" />

• 确保相机权限描述正确配置（info.plist）：

<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
    <string>需要访问相机进行条码扫描</string>
</edit-config>

3. 优化组件渲染逻辑 #

空白屏可能源于组件初始化时机与页面渲染的冲突，调整代码：

• 延迟初始化StreamBarcodeReader组件，确保页面完全加载后再渲染：

<template>
  <q-page class="pages q-pa-none">
    <div class="flex full-width justify-center items-center">
      <div class="neumorphism q-ma-md q-pa-md">
        <q-spinner
          color="primary"
          size="3em"
          :thickness="4"
          v-if="!scanerLoaded"
        />
        <StreamBarcodeReader
          @decode="onDecode"
          @loaded="onLoaded"
          v-if="isPageReady"
        ></StreamBarcodeReader>
      </div>
    </div>

    <div class="barcodePwaInfo neumorphism q-pa-lg">
      {{ result }}
    </div>
  </q-page>
</template>

<script setup>
import { ref, onMounted } from "vue";
import { StreamBarcodeReader } from "vue-barcode-reader";

const scanedInProgress = ref(false);
const scanerLoaded = ref(false);
const result = ref("");
const isPageReady = ref(false);

onMounted(() => {
  setTimeout(() => {
    isPageReady.value = true;
  }, 100);
});

function onDecode(text) {
  result.value = text;
}
function onLoaded() {
  scanedInProgress.value = false;
  scanerLoaded.value = true;
}
</script>

• 简化组件外层DOM结构，减少不必要的嵌套容器

4. 替换为原生扫描插件 #

若上述方法无效，可改用Cordova原生条码扫描插件cordova-plugin-barcodescanner，规避WebView层面的兼容性问题：

• 安装插件：cordova plugin add cordova-plugin-barcodescanner
• 替换扫描逻辑为原生调用：

function scanBarcode() {
  cordova.plugins.barcodeScanner.scan(
    (scanResult) => {
      if (!scanResult.cancelled) {
        result.value = scanResult.text;
      }
    },
    (error) => {
      console.error("扫描失败:", error);
    }
  );
}

内容的提问来源于stack exchange，提问作者Divyesh Gondaliya