ionic7—条形码扫描功能

前言：

        目前有个需求需要开发一个二维码扫描功能，能够识别二维码中携带的数据，并且参考了其他的APP扫描功能，需要提供例如闪光灯的常用的功能。

难点：

        实际上作为使用框架进行开发，我们更多需要去借助插件去调用地层原生的API，但是我调研了几天，在网络上没有什么有用的信息（都是ionic1/2采用的插件，早已停止维护了）

        所以我会借助这篇帖子，将截至目前我尝试可以实现的插件列举出来，以及插件的使用注意项。

插件：

        1.@capacitor-mlkit/barcode-scanning

                文档地址：https://github.com/capawesome-team/capacitor-mlkit/tree/main/packages/barcode-scanning#startscanoptions

                该插件我强烈推荐，因为它的文档相较于其他插件，比较全面，并且提供了较多的API可以让我们实现功能，话不多说，给出实现步骤

  第一步：  npm install @capacitor-mlkit/barcode-scanning
           npx cap sync

  第二步:   AndroidManifest.xml文件配置(这是安卓的)
            <!-- 经过测试，meta-data不需要 -->
            <meta-data android:name="com.google.mlkit.vision.DEPENDENCIES"         android:value="barcode_ui"/>

            // 访问相机
            <uses-permission android:name="android.permission.CAMERA" />
            // 闪光灯权限
            <uses-permission android:name="android.permission.FLASHLIGHT"/>
            
            info.plist文件配置(ios端)
             <key>NSCameraUsageDescription</key>
	         <string>需要访问您的相机以启用闪光灯和拍照功能</string>

   第三步：    vue中使用
        DOM
            <div style="backgroudn:red" @click="startScan">开启扫描</div>
        CSS
           // Hide all elements
            body.barcode-scanner-active {
              visibility: hidden;
              --background: transparent;
              --ion-background-color: transparent;
            }

            // Show only the barcode scanner modal
            .barcode-scanner-modal {
              visibility: visible;
            }
          
          JS
            import {
              BarcodeScanner,
              BarcodeFormat,
              LensFacing,
            } from '@capacitor-mlkit/barcode-scanning';


            const startScan = async () => {
              // 隐藏主体部分
              document.querySelector('body')?.classList.add('barcode-scanner-active');

              // 条形码扫描后，此回调会触发
              await BarcodeScanner.addListener(
                'barcodeScanned',
                async result => {
                  console.log('扫描成功了');
                  console.log(result.barcode);
                },
              );

              // 开启扫描
              await BarcodeScanner.startScan();
            };
          

       总结：1.如果还需要其他功能，可以去github文档中看看

                   2.过程中出现startScan唤起摄像头，但是没有扫描的UI是正常的，因为该API就是需要我们自己弄UI，并且需要注意一定要隐藏DOM，不然会发现屏幕虽然开始摄像，但是DOM元素居然没有消失（这是因为摄像头显示内容是在webview视图后面的，它不是一个DOM，所以为了好的体验，我们需要首先将DOM全部隐藏这样就是一个干净的扫描了）

                    3.如果你看过文档，你会发现，该插件明明提供一个可以直接使用的API，scan(),可以直接出现一个扫描的UI（如下图），国内应该是不起作用的，这个API的前提是你手机需要有Google Play,并且isGoogleBarcodeScannerModuleAvailable、installGoogleBarcodeScannerModule这两个API也不能用（当然你如果像我例子一样使用startScan用了也没意义），并且我建议也不要使用scan，因为据我查到的信息在国外也存在有些手机没有这个，导致功能无法正常实现，所以我建议使用startScanAPI

                      4.还有就是该插件内部的知识了，文档会告诉你它是采用谷歌的MLKit来实现的，我通过查询提问，得知了该插件哪怕是断网也是可用的，因为它将MLKit捆绑到一起了，当然有个坏处就是会导致，ionic打包出来的APP体积会增大将近10MB。

        效果：

                

开启摄像头

2.@capacitor-community/barcode-scanner

        文档地址：https://github.com/capacitor-community/barcode-scanner

        这个插件我其实不想列出的，但是毕竟还是实现了，而且它是第一个插件的前身，所以列举一下的吧，但我不建议你使用这个插件，我用的时候有些bug我没有解决（可能社区里面有回答，但我没仔细研究），并且这个插件最后一次更新是2023年5月，当然也不是特别老，但是好像也慢慢开始没有人维护了。

  1.npm install @capacitor-community/barcode-scanner
      npx cap sync
      
    2.在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>
    3.
    DOM
        <div style="background: red" @click="startScan">开始扫描</div>
    CSS
        body.scanner-active {
          --background: transparent;
          --ion-background-color: transparent;
          display: none;
        }
    JS
        const startScan = async () => {
          // / 检查摄像头是否有权限
          await BarcodeScanner.checkPermission({ force: true });
        
          // 背景色透明
          BarcodeScanner.hideBackground();
          document.querySelector('body').classList.add('scanner-active');
        
          const result = await BarcodeScanner.startScan(); // start scanning and wait for a result
        
          //  开始扫描，result是扫描完成后的结果
          if (result && result.hasContent) {
            console.log('扫描成功', result);
            console.log(result.content);
            document.querySelector('body').classList.remove('scanner-active');
          } else {
            console.log('没有扫描到内容');
            document.querySelector('body').classList.remove('scanner-active');
          }
        };

        总结： 这个插件的问题就是这个UI，扫描UI没有出现，并且文档我也没有看见关于UI的一些说明，上面只说要隐藏DOM，能不能自定义UI也不知道

3.@capacitor/barcode-scanner

        这个插件是capacitor官方文档上贴的，应该可以使用吧，但是我按照配置项目都跑不动，我也没细研究了算是另一个方向吧（这个插件很新2024年5月才出现）

完结：

        其实功能实现不难，前期的调研很重要，特别是使用ionci这类国内生态不好的框架，需要花时间去调研，并且需要看一下别人API的源码，多查看提问，去解决bug

        关于这个扫描二维码，同事说还是直接新建一个页面，通过路由进行跳转，那个页面就是没有DOM的这样也就不用隐藏了，确实这个想法是可取的，比我们直接隐藏DOM更优雅

再贴上免费的二维码生成网址,以及条形码生成器，可以自己去扫描测试一下功能：QR Code Generator | Create Your Free QR Codes

免费在线条码生成器: 免费创建条码!