Ionic 6如何通过Capacitor/Cordova读取USB串口内容？

一、Android USB设备读取替代方案（替代旧Serial插件） #

旧的Ionic v3 Serial插件已无法使用，推荐以下兼容Ionic 6的实现方案：

1. 适配新版的串口插件组合 #

使用cordova-plugin-usb-serial搭配@awesome-cordova-plugins/serial，这是适配Ionic 6+的官方维护插件，操作步骤：

• 安装依赖：

  ionic cordova plugin add cordova-plugin-usb-serial
  npm install @awesome-cordova-plugins/serial
  

• 模块导入（app.module.ts）：

  import { Serial } from '@awesome-cordova-plugins/serial/ngx';
  
  @NgModule({
    providers: [
      Serial,
      // 其他项目提供者
    ]
  })
  export class AppModule { }
  

• 核心功能示例代码：

  import { Serial } from '@awesome-cordova-plugins/serial/ngx';
  
  constructor(private serial: Serial) { }
  
  // 枚举可用USB设备
  async listUsbDevices() {
    try {
      const devices = await this.serial.list();
      console.log('可用设备:', devices);
      // 选取目标设备后建立连接
      await this.connectToDevice(devices[0].id);
    } catch (err) {
      console.error('枚举设备失败:', err);
    }
  }
  
  // 建立设备连接并监听数据
  async connectToDevice(deviceId: string) {
    try {
      await this.serial.open({
        baudRate: 9600,
        dataBits: 8,
        stopBits: 1,
        parity: 'none',
        deviceId: deviceId
      });
      console.log('连接成功');
      // 监听数据读取
      this.serial.registerReadCallback().subscribe((rawData) => {
        const dataStr = String.fromCharCode.apply(null, new Uint8Array(rawData));
        console.log('读取到数据:', dataStr);
      });
    } catch (err) {
      console.error('连接失败:', err);
    }
  }
  
  // 关闭连接
  async closeConnection() {
    try {
      await this.serial.close();
      console.log('连接已关闭');
    } catch (err) {
      console.error('关闭连接失败:', err);
    }
  }
  

2. 自定义Cordova插件封装原生API #

如果上述插件存在兼容性问题，可自行封装Android原生USB Host API：

• 创建自定义Cordova插件，调用Android的UsbManager、UsbDeviceConnection等核心类实现设备枚举、数据读写
• 在Ionic项目中通过cordova.exec直接调用自定义插件的方法完成功能

二、ionic start --cordova创建项目失败排查 #

执行命令失败可按以下步骤逐一排查：

• 检查依赖版本：确保Node.js版本在14.x-18.x区间，npm版本匹配（推荐6.x或8.x），可通过node -v、npm -v查看
• 清理缓存：执行npm cache clean --force后重试创建
• 指定模板版本：避免版本冲突，明确指定Ionic版本：

  ionic start myApp blank --type angular --cordova --ionic-version=6.x
  

• 网络与资源访问：确保网络稳定，可正常访问npm仓库和Ionic官方资源
• 手动分步创建：先创建纯Angular项目再添加Cordova平台：

  ionic start myApp blank --type angular
  cd myApp
  ionic cordova platform add android
  

• 检查Cordova环境：确认Android SDK已安装，ANDROID_HOME环境变量配置正确，可通过cordova requirements android检查依赖是否齐全

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