Electron学习3 使用serialport操作串口

这篇具有很好参考价值的文章主要介绍了Electron学习3 使用serialport操作串口。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Electron学习3 使用serialport操作串口,# Electron,electron,学习,javascript

一、准备工作

本文将使用 nodejs 的 SerialPort 包来实现串口通讯功能。
Node SerialPort 是一个 JavaScript 库,用于连接到在 NodeJS 和 Electron 中工作的串行端口,以下是准备环境:

  • Electron 开发环境
  • 电脑有串口通讯能力,一般使用USB-串口转接板
  • windows 操作系统

本文操作过程来自:
https://girishjoshi.io/post/access-serialport-from-electron-application-and-creating-gui-for-micropython-repl-on-esp8266/

二、 SerialPort 介绍

文档地址:
https://serialport.io/docs/

1. 核心软件包

(1) serialport

主对象,使用流式传输支持跨平台的串行端口访问。

(2) @serialport/stream

为绑定提供的流式接口。

(3) @serialport/bindings-cpp

为nodejs、electron提供跨平台的绑定支持。

(4) @serialport/binding-mock

为测试实现模拟绑定功能。

(5) @serialport/bindings-interface

一个typescript 接口用来实现自己的绑定时使用。

2. 解析器包

解析器用来对原始的二进制数据转换成自己需要的消息格式。 包含以下解析器包,这里不进行详解:

  • @serialport/parser-byte-length
  • @serialport/parser-cctalk
  • @serialport/parser-delimiter
  • @serialport/parser-inter-byte-timeout
  • @serialport/parser-packet-length
  • @serialport/parser-readline
  • @serialport/parser-ready
  • @serialport/parser-regex
  • @serialport/parser-slip-encoder
  • @serialport/parser-spacepacket

3. 命令行工具

比较有用的命令行工具,包括:

  • @serialport/list
  • @serialport/repl
  • @serialport/terminal

三、创建一个demo程序

1. 创建 electron 项目

# Clone the Quick Start repository
$ git clone https://github.com/electron/electron-quick-start
# Go into the repository
$ cd electron-quick-start
# Install the dependencies and run
$ npm install && npm start

2. 安装 serialport

npm install --save serialport 

3. 安装 electron-rebuild

因为选择npm版本不同,这里要对库进行重编译,要先安装 electron-rebuild 工具。

npm install --save-dev electron-rebuild  
.\node_modules\.bin\electron-rebuild
npm rebuild

注意原文路径中用的 / , 我在windows 系统,改用 \

4. 使用 node-gyp 编译库

npm install node-gyp electron electron-rebuild serialport --build-from-source
./node_modules/.bin/electron-rebuild
npm start

5. 修改 main.js 配置

修改 WebPreferences 如下:

webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration: true,
      contextIsolation: false
}

8. 写测试程序

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Electron test serialport</title>
</head>
<body>
<h1>Serial terminal</h1>


<script>
  //load serialport module
  const {SerialPort} = require('serialport');
  
  SerialPort.list().then(_=>{console.info(_);});
  const serialPort = new SerialPort({path:'COM3', baudRate: 115200}, function (err) {
    if(err) {
      console.error(err);
    }
  });
  console.info(serialPort);
  serialPort.write("abc", (err)=>{
    if (err) {
      return console.log('Error on write: ', err.message)
    }
    console.log('message written')
  });
  serialPort.on('error', function(err) {
    console.log('Error: ', err.message)
  });

  serialPort.on('data', function (data){
    console.info('data', data);
  });

</script>
<script>
  require('./renderer.js')
</script>
</body>
</html>

7. 运行程序

npm start

项目结构:
Electron学习3 使用serialport操作串口,# Electron,electron,学习,javascript

四、问题处理

在执行electron-rebuild时,可能需要安装windows-build-tools。新版本的windows-build-tools支持Python3.*版本,但使用Python2.7比较保险。

1. 安装python2.7虚拟环境

如果本机没有Python2.7,则可以使用MiniAnaconda配置虚拟环境 。 先下载安装MiniAnaconda工具,然后用命令行创建虚拟环境 :

conda create -n py27 python=2.7
conda activate py27

2. 安装windows-build-tools

直接安装windows-build-tools大概率会失败,可按以下流程操作:

在执行npm install -g node-gpy后使用命令:

npm install -g --production windows-build-tools@4.0.0
  1. 当命令行界面开始不动时,打开任务管理器,把Build Tools结束任务;
  2. 再打开.windows-build-tools文件夹中的build-tools-log.txt,添加Variable: IsInstalled = 1,保存,关闭;
    解决方案参考:https://blog.csdn.net/web15085181368/article/details/123192964

更多关于serialport的功能可参考官方文档。文章来源地址https://www.toymoban.com/news/detail-668566.html

到了这里,关于Electron学习3 使用serialport操作串口的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Electron 适配 Windows 7 32位操作系统

    1)electron v10.4.7 2)npm 13.14.0 Index of /download/release/v13.14.0/ 1)系统需升级为最低SP1版本的OS; 2)必须安装的.NET Framework 最低版本为4.6(本例中安装的是v4.6.2); 3)以防报错,最好安装微软常用运行库合集; 1)下载SP1升级包,并安装; 2)等待安装完成,重启计算机; 3)安装微

    2024年02月05日
    浏览(81)
  • Electron基础学习笔记

    官网: https://www.electronjs.org/ 文档:https://www.electronjs.org/zh/docs/latest/ Electron 是由 Github开发的开源框架 它允许开发者使用Web技术构建跨平台的桌面应用 Chromium : 为Electron提供了强大的UI能力,可以不考虑兼容性的情况下,利用强大的Web生态来开发界面。 Node.js :让Electron有了底

    2024年02月07日
    浏览(33)
  • Electron 学习_BrowserWindow

    BrowserWindow创建并控制浏览器窗口(主进程) 条件:在 app 模块 emitted ready 事件之前,您不能使用此模块。 1.在加载页面时,渲染进程第一次完成绘制时,如果窗口还没有被显示,渲染进程会发出 ready-to-show 事件 。 在此事件后显示窗口将没有视觉闪烁 2.设置backgroundColor 属性 3.设

    2024年02月15日
    浏览(28)
  • 【Electron】使用electron-builder打包时下载electron失败或慢的解决方案

    问题描述 electron-builder打包时报错信息如下: 解决 该问题是因为electron包需要翻墙获得,需要全局代理,但是太麻烦,我们一般是修改镜像源 在项目根目录下创建.npmrc文件,并且输入以下配置:

    2024年02月11日
    浏览(43)
  • 【electron+axios】如何在electron中封装使用axios,从下载到使用保姆级教程

    前期准备:我们需要搭建好electron项目,并配置好node,npm等环境后进行以下操作。如何搭建electron项目?请参考此章节:electron项目的搭建并集成串口工具 一、准备工作,下载axios依赖并在页面中引用 1.下载axios 与vue同样的,都是使用npm下载依赖后进行引入。代码如下 2.引用

    2024年03月27日
    浏览(43)
  • electron使用electron-builder进行MacOS的 打包、签名、公证、上架、自动更新

    由于electron在macOS下的坑太多,本文不可能把所有的问题都列出来,也不可能把所有的解决方案贴出来;本文也不太会讲解每一个配置点为什么要这么设置的原因,因为有些点我也说不清,我尽可能会说明的。所以,你要抛弃你之前所有已经完成的东西,最好弄一个全新的系统

    2024年02月03日
    浏览(40)
  • Electron学习1 安装环境与第一个程序

    Electron是一个用于构建跨平台桌面应用程序的开源库。它使用HTML、CSS和JavaScript等技术,通过将Web技术打包为原生应用程序,使得开发者能够创建出具有本地操作系统特性的软件。Electron使用Chromium作为渲染引擎,并允许开发者使用Node.js来访问底层系统资源。 本文将介绍elect

    2024年02月13日
    浏览(37)
  • electron的使用

    参见 PPT。 2.1 常见的桌面GUI工具介绍 名称 语音 优点 缺点 QT C++ 跨平台、性能好、生态好 依赖多,程序包大 PyQT Python 底层集成度高、易上手 授权问题 WPF C# 类库丰富、扩展灵活 只支持Windows,程序包大 WinForm C# 性能好,组件丰富,易上手 只支持Windows,UI差 Swing Java 基于AWT,

    2024年02月08日
    浏览(31)
  • 安装使用electron

    运行cmd查看是否安装及版本号 npm直接安装会报错缺少什么文件,使用cnpm进行安装 直接安装cnmp后,再用cnmp命令安装可能会报错Error: Cannot find module ‘node:util’ 原因是npm版本与cnpm版本,先卸载再指定版本安装 打开淘宝镜像网站链接https://npm.taobao.org/mirrors/electron/​​ 找到对应

    2024年02月10日
    浏览(36)
  • electron+vue3全家桶+vite项目搭建【25】使用electron-updater自动更新应用

    demo项目地址 electron-updater官网 我们不可能每次发布新的版本都让用户去手动下载安装最新的包,而是应用可以自动下载新包进行覆盖安装,electron-updater就可以非常方便的实现这个功能 引入依赖 实测用pnpm安装打包运行会有问题,这里还是推荐使用npm管理依赖 配置electron-bui

    2024年02月14日
    浏览(72)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包