咨询@zxing/ngx-scanner简化扫码方式及示例（Angular CLI 6.2.9环境）

嘿，我完全理解你在使用@zxing/ngx-scanner时面临的文档不全、官方示例跑不起来的困扰，结合你的Angular 6.2.9 + Node 8.9.1环境，我整理了一套简化的实操步骤和可直接运行的示例，应该能帮你快速搞定条码扫描功能！

第一步：安装适配Angular 6的版本 #

因为最新版的@zxing/ngx-scanner只支持Angular 10+，所以你需要安装适配Angular 6的2.x版本：

npm install @zxing/ngx-scanner@2.3.0 --save
# 或者用yarn
yarn add @zxing/ngx-scanner@2.3.0

第二步：配置模块 #

在你的app.module.ts中导入扫描模块：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
// 导入扫描模块
import { ZXingScannerModule } from '@zxing/ngx-scanner';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // 初始化扫描模块
    ZXingScannerModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

第三步：组件内实现扫描功能 #

模板文件（app.component.html） #

这里做了简化，保留核心功能，同时添加了权限提示和结果展示：

<!-- 扫描组件核心 -->
<zxing-scanner
  (scanSuccess)="onScanSuccess($event)"
  (permissionResponse)="onPermissionChange($event)"
  [tryHarder]="true"
  [showMirror]="false"
>
  <!-- 无权限时的提示 -->
  <div *ngIf="!hasPermission" class="permission-alert">
    请允许浏览器访问摄像头才能使用扫描功能哦
  </div>
</zxing-scanner>

<!-- 扫描结果展示 -->
<div class="scan-result" *ngIf="scannedText">
  扫描到的内容：<strong>{{ scannedText }}</strong>
</div>

组件逻辑（app.component.ts） #

处理扫描成功事件、权限状态：

import { Component } from '@angular/core';
import { Result } from '@zxing/library';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  hasPermission = false;
  scannedText: string;

  // 扫描成功回调
  onScanSuccess(result: Result) {
    this.scannedText = result.text;
    // 这里可以添加你的业务逻辑，比如跳转到详情页、保存数据等
    console.log('扫描成功：', result.text);
  }

  // 监听权限变化
  onPermissionChange(permission: boolean) {
    this.hasPermission = permission;
  }
}

基础样式（app.component.css） #

给扫描组件和结果做简单布局：

zxing-scanner {
  width: 90%;
  max-width: 500px;
  margin: 30px auto;
  display: block;
}

.permission-alert {
  text-align: center;
  color: #dc3545;
  padding: 20px;
  background: #f8d7da;
  border-radius: 4px;
}

.scan-result {
  text-align: center;
  margin-top: 20px;
  font-size: 1.2rem;
}

简化使用的小技巧 #

• 开启tryHarder="true"：让扫描器更努力识别模糊或小条码，提升成功率
• 关闭showMirror="false"：默认镜像可能让用户混淆，关闭后显示真实摄像头画面
• 封装成独立组件：把扫描逻辑抽成barcode-scanner.component，在多个页面直接引用，减少重复代码
• 本地开发用HTTPS：浏览器要求摄像头访问必须在安全环境下，启动项目时用ng serve --ssl true

注意事项 #

• 务必安装指定版本：Angular 6只能用@zxing/ngx-scanner@2.x.x，装错版本会出现编译错误
• 检查浏览器兼容性：你的Node 8.9.1对应的Chrome版本应该支持MediaDevices API，但如果是旧浏览器可能无法使用
• 权限问题：第一次打开页面时要允许摄像头访问，否则扫描器无法工作

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