Johnny-Five.IO 的 Electron-Serialport 示例项目教程

Johnny-Five.IO 的 Electron-Serialport 示例项目教程

electron-serialport项目地址:https://gitcode.com/gh_mirrors/ele/electron-serialport

该项目是使用 Electron 框架和 Serialport 库创建的一个示例应用，用于在 Electron 环境中操作串口通信。以下是项目的介绍以及关键组成部分。

1. 目录结构及介绍

electron-serialport/
│
├── .gitignore         # Git 忽略文件列表
├── LICENSE.md         # 开源许可文件
├── README.md          # 项目说明文件
├── index.html         # 主页面HTML文件
├── main.js            # 主进程脚本，负责初始化Electron应用和Serialport
├── package-lock.json  # 依赖锁定文件
├── package.json       # 项目配置文件，包括依赖和构建设置
├── preload.js         # 预加载脚本，提供Electron渲染器进程与主进程之间的安全通信
├── renderer.js        # 渲染进程脚本，处理UI交互和串口数据
└── ...

• .gitignore: 规定哪些文件或文件夹不需要被Git版本控制。
• LICENSE.md: 项目使用的开源许可证（CC0-1.0）。
• README.md: 项目简介和使用指南。
• index.html: 应用的主界面HTML模板。
• main.js: 项目的主进程代码，主要任务是初始化Electron应用程序并管理Serialport实例。
• package-lock.json 和 package.json: 定义项目依赖和构建配置。
• preload.js: 在渲染进程中运行的脚本，通过Electron的contextBridge暴露安全接口给renderer.js。
• renderer.js: 处理用户界面逻辑和串口通信相关功能。

2. 项目的启动文件介绍

2.1 main.js

main.js 文件是Electron应用的入口点。在这个文件中，你需要初始化Electron的BrowserWindow对象，并加载HTML主页面。此外，它还负责安装serialport库并创建Serialport实例，以便进行串口通信。例如：

const { app, BrowserWindow } = require('electron');
const SerialPort = require('serialport');

function createWindow() {
  // 创建浏览器窗口...
}

app.whenReady().then(() => {
  createWindow();
  
  // 连接串口...
});

// 当所有资源关闭时，退出
app.on('window-all-closed', function () {
  if (process.platform !== 'darwin') app.quit();
});

2.2 renderer.js

renderer.js 通常处理用户界面和与主进程之间的通信。使用Electron的ipcMain和ipcRenderer，可以在渲染进程和主进程之间传递消息。例如，你可以定义一个函数来发送打开串口的请求：

const { ipcRenderer } = require('electron');

function openSerialPort() {
  ipcRenderer.send('open-serialport', { portName: '/dev/ttyUSB0' });
}

并在main.js中监听这个事件并处理实际的打开操作：

ipcMain.on('open-serialport', (event, args) => {
  const serialPort = new SerialPort(args.portName);
  // ...
});

3. 项目的配置文件介绍

3.1 package.json

package.json 文件包含了项目的基本信息，如项目名、作者和版本，以及项目依赖和其他脚本命令。以下是一个简化版的package.json例子：

{
  "name": "electron-serialport",
  "version": "1.0.0",
  "description": "An example of using serialport in an Electron app",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "dependencies": {
    "electron": "^14.x.x",
    "serialport": "^9.x.x"
  }
}

• "name": 项目名称。
• "version": 项目版本号。
• "main": 应用的入口文件（即main.js）。
• "scripts": 提供可执行的命令，比如"start"是启动应用的命令。
• "dependencies": 列出了项目所需的依赖库及其版本。

要启动项目，只需在终端中运行npm start或者yarn start。

通过理解上述内容，你应该能够运行和修改这个示例项目，以适应自己的串口通信需求。在进一步开发过程中，可以参考Electron的官方文档和Serialport的API来了解更详细的用法。

electron-serialport项目地址:https://gitcode.com/gh_mirrors/ele/electron-serialport