看了很多文章都是有瑕疵的,也踩了很多坑,为此记录一下自己的踩坑记录.
本文是基于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 文件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js
<script>
document.write(process.versions.node)
</script>, Chromium
<script>
document.write(process.versions.chrome)
</script>, and Electron
<script>
document.write(process.versions.electron)
</script>.
<script>
// You can also require other files to run in this process
require('./renderer.js')
var serialport = require('serialport');
serialport.list(function(err, ports) {
console.log(ports);
});
</script>
</body>
</html>
在改下 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 你就会看到如下效果
编译其他的模块 也是这么用
成长的路上总是那么枯燥!!! 加油吧 骚年!!
成功啦 当然这个是借鉴了很多博客的 我就不一一列举了,谢谢他们 我这个也只是记录一下方便下次回来看. 如有侵权联系删.谢谢