electron 使用原生模块之 串口(node-serialport)

看了很多文章都是有瑕疵的,也踩了很多坑,为此记录一下自己的踩坑记录.

本文是基于window10 弄得 其他的可以去找找 我没试过 不建议在此文章踩坑.

一.先决条件

1. python2.7 (必须)  python3 不兼容.

       自行官网下载

2.本地安装vs 或者  npm install windows-build-tools -g   

注意:里面包含c c++的编译所需要的东西

嫌vs麻烦的话 npm install windows-build-tools -g 吧 我两个都装了 不装的话我不知道会不会有问题. 我之前装的vs2019 是有问题的 装了windows-build-tools 就可以了

3. node-gyp

不会的话自行百度吧

 

二 用官方的例子

 

1.克隆 

git clone https://github.com/electron/electron-quick-start.git

  不会的话 看看文档去  https://electron.org.cn/doc/tutorial/quick-start.html

2. 进入

cd electron/electron-quick-start

( 在这里我改了 package.json文件  "electron": "^5.0.1", 我改成了我下载的最新的版本 也不知道不改有没有影响 查看的的时候  命令 electron -v 就可以看到自己的版本了)

3. 安装依赖 

npm i (有时要-天朝原因) 或者

cnpm i  或者 

yarn install(有时要-天朝原因)

4. 安装serialport

npm install --save serialport

5. 安装electron-rebuild

cnpm install --save-dev electron-rebuild

6. 重新编译

.\node_modules\.bin\electron-rebuild.cmd

到这里没报错的话 恭喜你骚年,你离成功不远了  

 

三. 报错的话 一般就几个问题

 

1.天朝原因 网络问题 用cnpm就好 不会的话百度一下吧 或者

2. 先决条件没做好 python必须是2.7 如果是有多个版本的话 是会有冲突的 建议 set 一下

3.vs没装 或者没有windows-build-tools 

4.不然就是node版本问题了 我都是用最新的

 

四. 测试

 

修改 index.html 文件

Hello World!

We are using Node.js

, Chromium

, and Electron

.

偶然看了下文档 serialport 这个模块好像更新了 list的这个方法不支持直接传回调函数调用了 官网的用法是

const SerialPort = require('serialport')

SerialPort.list().then(

ports => ports.forEach(console.log),

err => console.error(err) )

 

在改下 main.js文件

// Modules to control application life and create native browser window

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

 

// Keep a global reference of the window object, if you don't, the window will

// be closed automatically when the JavaScript object is garbage collected.

let mainWindow

 

function createWindow() {

// Create the browser window.

mainWindow = new BrowserWindow({

width: 800,

height: 600,

webPreferences: {

nodeIntegration: true

}

})

mainWindow.webContents.openDevTools()

// and load the index.html of the app.

mainWindow.loadFile('index.html')

// Open the DevTools.

// mainWindow.webContents.openDevTools()

 

// Emitted when the window is closed.

mainWindow.on('closed', function() {

// Dereference the window object, usually you would store windows

// in an array if your app supports multi windows, this is the time

// when you should delete the corresponding element.

mainWindow = null

})

}

// This method will be called when Electron has finished

// initialization and is ready to create browser windows.

// Some APIs can only be used after this event occurs.

app.on('ready', createWindow)

 

// Quit when all windows are closed.

app.on('window-all-closed', function() {

// On macOS it is common for applications and their menu bar

// to stay active until the user quits explicitly with Cmd + Q

if (process.platform !== 'darwin') app.quit()

})

 

app.on('activate', function() {

// On macOS it's common to re-create a window in the app when the

// dock icon is clicked and there are no other windows open.

if (mainWindow === null) createWindow()

})

// In this file you can include the rest of your app's specific main process

// code. You can also put them in separate files and require them here.

然后 npm start 你就会看到如下效果

注意: 我的测试环境是台式机 ,台式机默认是有一个虚拟串口 COM1 的 如果你们用的是笔记本记得要插上一个串口才会看到效果

或者你的电脑用了蓝牙鼠标是走串口的也是可以看到效果的

 

编译其他的模块 也是这么用

成长的路上总是那么枯燥!!! 加油吧 骚年!!

成功啦 当然这个是借鉴了很多博客的 我就不一一列举了,谢谢他们 我这个也只是记录一下方便下次回来看. 如有侵权联系删.谢谢