Ionic Vue 电容器：未在 Android 上实现错误使用电容器条码扫描仪

Question

我正在使用 Vue js 构建我的 Ionic 项目，使用 Capacitor 构建。

这是我的package.json

  "name": "photo-gallery",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor-community/barcode-scanner": "^4.0.1",
    "@capacitor-mlkit/barcode-scanning": "^5.0.3",
    "@capacitor/android": "4.7.0",
    "@capacitor/app": "4.1.1",
    "@capacitor/camera": "^4.1.4",
    "@capacitor/core": "^5.2.2",
    "@capacitor/filesystem": "^4.1.4",
    "@capacitor/haptics": "4.1.0",
    "@capacitor/ios": "4.7.0",
    "@capacitor/keyboard": "4.1.1",
    "@capacitor/preferences": "^4.0.2",
    "@capacitor/status-bar": "4.1.1",
    "@ionic/core": "^7.0.6",
    "@ionic/pwa-elements": "^3.1.1",
    "@ionic/vue": "^7.2.0",
    "@ionic/vue-router": "^5.6.13",
    "axios": "^1.3.4",
    "capacitor-plugin-dynamsoft-barcode-reader": "^1.3.20",
    "core-js": "^3.6.5",
    "ionicons": "^6.0.3",
    "swiper": "^9.3.2",
    "vue": "^3.2.21",
    "vue-router": "^4.1.6",
    "wave-ui": "^3.0.4"
  },
  "devDependencies": {
    "@capacitor/assets": "^2.0.4",
    "@capacitor/cli": "4.7.0",
    "@types/jest": "^27.0.2",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "5.0.8",
    "@vue/eslint-config-typescript": "^11.0.2",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.40.0",
    "eslint-plugin-vue": "^9.8.0",
    "jest": "^27.3.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.3.5"
  },
  "description": "An Ionic project"

对于条形码扫描仪，我遵循这个； https://github.com/capacitor-community/barcode-scanner

首先我将条形码扫描仪安装到我的项目中

npm install @capacitor-community/barcode-scanner
npx cap sync 

然后在我的 androidManifest.xml 文件中，我获得了相机权限

<?xml version="1.0" encoding="utf-8"?>
<manifest
  xmlns:android="http://schemas.android.com/apk/res/android"
+  xmlns:tools="http://schemas.android.com/tools"
  package="com.example">

  <application
+    android:hardwareAccelerated="true"
  >
  </application>

+  <uses-permission android:name="android.permission.CAMERA" />

+  <uses-sdk tools:overrideLibrary="com.google.zxing.client.android" />
</manifest>

然后我在 QRScanner.vue 文件上实现条形码扫描仪

<script lang="js">
  import { defineComponent, alertController } from 'vue';
  import { BarcodeScanner } from '@capacitor-community/barcode-scanner';
  import { IonButton, IonContent, IonHeader, IonItem, IonPage, IonIcon } from '@ionic/vue';
  import { chevronBackCircleOutline } from 'ionicons/icons';
  import { Plugins } from "@capacitor/core";
  
  export default defineComponent({
    name: 'QRScanner',

    components: {
      IonButton,
      IonContent,
      IonHeader,
      IonItem,
      IonPage,
      IonIcon,
    },
    data() {
      return {
        chevronBackCircleOutline,
        isSupported: false,
        barcodes: [],
        alertController: alertController,
      };
    },
    methods: {
        async startScan() {
        try {

            // Make background of WebView transparent
            BarcodeScanner.hideBackground();

            const result = await BarcodeScanner.startScan();

            // If the result has content
            if (result.hasContent) {
            console.log(result.content);
            // You can process the scanned content as per your requirements
            // For example, you can display it on the screen or send it to a server.
            }
        } catch (error) {
            console.error("Barcode Scanner error:", error);
        }
    },
    },
  });
  </script>

但是，当通过 ionicserve 部署在网络上时，它可以正常工作。 我正在使用 Ionic 7.1.1 和 Capacitor 5 ，但在模拟器上它显示此错误

Line 3 - Msg: Uncaught (in promise) Error: "BarcodeScanner.hideBackground()" is not implemented on android