闲言碎语
😎
electron是一个使用Js来做桌面应用的的玩意，大名鼎鼎的vs code就是用这货做出来的。
node-serialport是一个可以用来访问电脑上串口的node.js包
Node.js package to access serial ports for reading and writing. Welcome your robotic JavaScript overlords. Better yet, program them!
作为一个只会C语言的渣渣，为了在electron上使用node-serialport折腾了我好一段时间😤。主要原因是node-serialport是一个原生库，使用的时候需要编译。而electron有自身的node.js环境，原生库在上面运行之前需要重新编译。这个编译过程会从网上下载一堆依赖，也就是因为网络原因这个过程总会失败。。。。。。
就在写这篇文章的今天，无意间百度到了解决方法😅。之前一直用 electron serialport这样的关键词，今天不知道那个抽了哪个筋，改用关键词 electron 原生模块 找到了这篇文章，里面提到了使用淘宝代理。cnpm我知道，但是万万没想到淘宝代理也有electron的镜像😂。
怎么做
本文假设你已经能使用node-serialport了，没有的话，还请移步这里。使用这个模块的时候十有八九需要重新编译的，因此需要安装node-pre-gyp，如果是Windows用户，可以看这里node-gyp installation。这个环境也有的折腾的。不是本文的重点，不提太多🙄。
node-pre-gyp建议采用全局安装，这样可以在cmd上面使用。
另外，好像npm上面的serialport有点问题，建议到GitHub上下载个源码在本地安装。
cnpm install electron --save-dev
当然可以使用cnpm install electron@1.6.2 --save-dev来指定版本，这里使用了1.6.2这个版本的electron。
安装本地的node-serialport包需要使用npm，npm install node-serialport本地路径。
安装完之后，大头的工作才开始，如果顺利的话可以一次通过。先将目录定位到node-serialport。可以使用命令行cd .\\node_modules\\serialport\\。
然后在使用这条命令行来编译
node-pre-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell
最近在使用electron的时候,发现不用淘宝镜像也可以成功，建议先试一下这个，不行再换淘宝的。
node-pre-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://atom.io/download/electron
其中 --target=1.6.2用来指定electron的版本，--arch用两种选择ia32或者x64，--dist-url指定下载头。
强调
为了保证可以成功，先保证可以在node.js上面成功使用node-serialport！！！
这里提到了node-pre-gyp和node-gyp，两者什么区别我也不清楚。在Windows下编译原生库好像需要vs的一些东西，由于我的电脑上先前安装了vs2015。我只安装了node-pre-gyp和py2.7（py3不支持，只能用2.7），然后就可以成功编译和使用node-serialport。
这这个过程如果报错了，看看是不是有什么404。如果有十有八九是网络问题😅。
最后一步
如果你顺利的话，就来到了最后一步。激动人心的一步。
暂时没有用GitHub，只能贴代码了。
下面是package.json的内容
{
"name": "electron_serialport",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"preinstall": "npm install .\\node-serialport-master",
"postinstall": "cd .\\node_modules\\serialport\\ && node-pre-gyp rebuild --target=1.6.2 --arch=x64 --target_arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^1.6.2"
}
}
这里使用了脚本，可以使用npm install来安装需要的包并编译serialport包。请到GitHub上下载node-serialport-master并解压到工程文件夹下面。
接着是index.js的内容
const {app, BrowserWindow, dialog} = require('electron')
const path = require('path')
const url = require('url')
let win;
app.on('ready', () => {
win = new BrowserWindow()
win.on('close', () => {
win = null;
})
win.loadURL(url.format({
pathname: path.join(__dirname, 'index.html'),
protocol: 'file',
slashes: true
}))
win.webContents.openDevTools();
})
app.on('window-all-closed', ()=> {
app.quit();
})
然后是count.js的内容，serialport有关的代码就在这里。
const Serialport = require('serialport');
Serialport.list((err, ports) => {
ports.forEach((port) => {
console.log(port.comName);
});
});
let cnt = 0;
setInterval(() => {
document.getElementById('cnt').textContent = cnt;
cnt++;
}, 1000)
最后是index.html
<!doctype html>
<html>
<head>
<title>electron</title>
</head>
<body>
<h1>
Hello electron!
</h1>
<div id = "cnt"></div>
</body>
<script>require('./count.js')</script>
</html>
这个项目的目录结构是这样的，
目录结构
网友评论