Ionic 3页面集成Barcode Scanner：如何在页面下半部内嵌扫码功能？

嘿，这个需求我帮不少开发者搞定过——要在页面下半部分固定区域实现扫码，不用跳转或弹出全屏界面，核心是替换掉默认的弹窗式扫码插件，改用支持内嵌DOM元素的扫描插件。下面是具体的实现步骤：

1. 替换扫码插件 #

默认的phonegap-plugin-barcodescanner是弹窗式的，我们改用cordova-plugin-cszbar，它支持把扫描视图绑定到页面的某个DOM容器里。

先卸载旧插件（如果已经安装）：

cordova plugin remove phonegap-plugin-barcodescanner

安装新插件：

cordova plugin add cordova-plugin-cszbar

2. 页面布局（HTML） #

在你的页面模板里，划分出上半部分内容区和下半部分的扫码容器：

<ion-content class="scan-page">
  <!-- 页面上半部分自定义内容 -->
  <div class="top-section">
    <h3>扫码前的内容</h3>
    <p>这里可以放表单、说明文字等</p>
  </div>

  <!-- 下半部分的扫码区域 -->
  <div #scannerContainer class="scanner-container"></div>
</ion-content>

3. 样式设置（CSS） #

通过CSS把扫码容器固定在页面下半部分：

.scan-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-section {
  flex: 1; /* 上半部分占剩余空间 */
  padding: 20px;
}

.scanner-container {
  width: 100%;
  height: 50vh; /* 占视口高度的一半，刚好是下半部分 */
  border-top: 2px solid #3880ff;
  background-color: #000;
}

4. 初始化扫码逻辑（TypeScript） #

在页面的TS文件里，绑定扫码器到指定容器，并监听扫码结果：

// 声明插件的全局变量，因为没有官方Ionic Native包装
declare var CSZBar: any;

import { Component, ViewChild, ElementRef } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-scan-inline',
  templateUrl: 'scan-inline.html',
})
export class ScanInlinePage {
  @ViewChild('scannerContainer') scannerContainer: ElementRef;
  private scannerInstance: any;

  constructor(public navCtrl: NavController) {}

  // 页面进入后初始化扫码器
  ionViewDidEnter() {
    this.initInlineScanner();
  }

  // 页面离开时销毁扫码器，避免内存泄漏
  ionViewWillLeave() {
    if (this.scannerInstance) {
      this.scannerInstance.destroy();
    }
  }

  private initInlineScanner() {
    const containerElement = this.scannerContainer.nativeElement;

    // 初始化扫码器，绑定到指定DOM容器
    this.scannerInstance = new CSZBar.Scanner({
      element: containerElement,
      scanMode: 'continuous', // 可选：continuous持续扫描 / single扫一次停止
      formats: 'QR_CODE,CODE_128,EAN_13', // 指定支持的条码格式，按需调整
    });

    // 监听扫码成功事件
    this.scannerInstance.onSuccess((scanResult: any) => {
      console.log('扫码结果:', scanResult);
      // 这里处理你的业务逻辑，比如显示结果、发起请求等
      // 如果是single模式，扫码后可以停止：this.scannerInstance.stop();
    });

    // 监听扫码错误
    this.scannerInstance.onError((error: any) => {
      console.error('扫码出错:', error);
    });

    // 启动扫描
    this.scannerInstance.start();
  }
}

5. 权限配置 #

确保config.xml里添加了相机权限（插件会自动添加，但可以手动确认）：

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

<!-- iOS权限 -->
<edit-config target="NSCameraUsageDescription" file="*-Info.plist" mode="merge">
  <string>需要访问相机进行扫码操作</string>
</edit-config>

注意事项 #

• 必须在真实设备上测试，模拟器没有相机硬件，无法正常工作。
• 如果不需要持续扫描，把scanMode改成single，扫码后会自动停止，需要重新启动的话调用this.scannerInstance.start()。
• 可以根据需求调整扫码容器的大小和位置，比如改成固定高度300px，或者居中显示。

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