当前位置：首页>前端>正文

html 串口demo h5调用串口

前端2024-05-14 22:37:45

使用h5开发桌面收银应用，客屏显示价格需要应用通过串口给客屏写入内容。electron应用的服务是用node起的，串口通信的任务就落到了node的serialport模块身上。网上例子不太多，找了好几个照着编译都出现了报错。多次尝试串口功能才调试成功。

1.安装serialport等相关环境

安装erialport

1.安装serialport等相关环境

安装 serialport

编译

调试

1.安装serialport等相关环境

创建electron这里就不介绍有空在写一篇。

安装前可以安装npm加速有时候很慢以为崩了给关掉了就不好了

全局设置下载源：
npm config set registry https://registry.npm.taobao.org/
下载node源码加速：
npm config set disturl https://npm.taobao.org/mirrors/node 
然后将electron包下载地址注册位淘宝的镜像:
npm config set ELECTRON_MIRROR https://npm.taobao.org/mirrors/electron/

安装 serialport

cnpm install serialport -S

background.js 中添加调用

调用实例串口方法 baudRate 波特率 
serialPort = new SerialPort('COM2', {
    baudRate: 2400
});
写入数据
serialPort.write(123.45, function () {});

咔一个运行 npm run electron:serve

html 串口demo h5调用串口,html 串口demo h5调用串口_串口,第1张

不到拥护啥吧打开报错位置（dist_electron\index.js:3338:1）是已经编译的文件

拥护啥呢

electron使用原生模块需要再编译，解释这个问题官方文档

编译

安装 electron-rebuild（electron用于编译node原生模块）
npm install --save-dev electron-rebuild
输入命令开始重新编译
./node_modules/.bin/electron-rebuild.cmd

编译时间可能很长大多是时候可能还是不好使T-T

html 串口demo h5调用串口,html 串口demo h5调用串口_node.js_02,第2张

编译会用到node-gyp，由于node程序中需要调用一些其他语言编写的工具甚至是dll，需要先编译一下，否则就会有跨平台的问题

node-gyp 支持的python的版本是2.7-3.0 当python版本不一致时导致安装失败

如果你电脑没有python可以按这个文章安装

还是报错 cannot read property 'indexOf' of undefind....

在vue.config.js中添加两句

html 串口demo h5调用串口,html 串口demo h5调用串口_html 串口demo_03,第3张

这样就完美启动不报错了如果依然出现报错可能是依赖包有问题删除node_moduleswen文件夹重新安装一遍

vue.config.js添加externals: ['serialport'], nodeModulesPath: ['./node_modules'],可能导致./node_modules/.bin/electron-rebuild.cmd 这个命令执行失败，可以先注释这两条在执行编译命令，编译通过后打开注释运行项目，课正常启动了