uni-app如何在电脑上查看并获取CH340串口信息？

发布于 1周前 作者 itying888 来自 Uni-App

uni-app如何在电脑上查看并获取CH340串口信息？

项目信息

项目创建方式 开发环境 版本号
Harmonyos Next教程
1 回复

要在电脑上通过uni-app查看并获取CH340串口信息，首先需要明确uni-app是基于Vue.js的多端统一开发框架，主要面向Web、小程序等平台，而直接操作串口这类底层硬件功能并不在其原生支持范围内。不过，可以通过原生插件或电子桌面应用（如使用Electron）来实现这一需求。

由于uni-app原生插件开发相对复杂，这里提供一个简化的思路，即利用Electron结合Node.js的serialport库来实现串口通信，然后将数据通过某种方式（如WebSocket）传递给uni-app前端展示。

Electron部分（主进程）

首先，确保你已经安装了Node.js和npm，然后创建一个新的Electron项目，并安装serialport库：

npm init -y
npm install electron serialport

创建一个main.js文件作为Electron的主进程文件：

const { app, BrowserWindow } = require('electron');
const SerialPort = require('serialport');
const Readline = require('@serialport/parser-readline');
const path = require('path');

let mainWindow;

function createWindow() {
  mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false,
    },
  });

  mainWindow.loadFile('index.html');

  const port = new SerialPort('COM3', { baudRate: 9600 });
  const parser = port.pipe(new Readline({ delimiter: '\n' }));

  parser.on('data', (data) => {
    mainWindow.webContents.send('serial-data', data);
  });
}

app.whenReady().then(createWindow);

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow();
  }
});

前端部分（uni-app或HTML）

在index.html中，你可以使用WebSocket或Electron的IPC机制来接收串口数据。由于这里使用了Electron的webContents.send，需要在preload.js中暴露一个接口给渲染进程，或者直接在渲染进程使用Electron的API（需要禁用contextIsolation）。

为了简洁，这里直接在渲染进程中使用：

<!DOCTYPE html>
<html>
<head>
  <title>Serial Port</title>
</head>
<body>
  <div id="app">Serial Data: <span id="data"></span></div>
  <script>
    const { ipcRenderer } = require('electron');

    ipcRenderer.on('serial-data', (event, data) => {
      document.getElementById('data').innerText = data;
    });
  </script>
</body>
</html>

注意，这种方式需要Electron的nodeIntegration设置为true且contextIsolation设置为false，出于安全考虑，生产环境中应尽量避免这种配置。

以上代码提供了一个基本框架，用于在Electron应用中读取CH340串口信息，并通过Electron的IPC机制将数据传递给前端展示。在实际项目中，你可能需要根据具体需求进行更多的配置和优化。

回到顶部