Electron提供了丰富的本地（操作系统）的API，使你能够使用纯JavaScript来创建桌面应用程序。与其它各种的Node.js运行时不同的是Electron专注于桌面应用程序而不是Web服务器。
Electron 可以让你使用纯 JavaScript 调用丰富的原生 APIs 来创造桌面应用。你可以把它看作是专注于桌面应用而不是 web 服务器的，io.js 的一个变体。
这不意味着 Electron 是绑定了 GUI 库的 JavaScript。相反，Electron 使用 web 页面作为它的 GUI，所以你能把它看作成一个被 JavaScript 控制的，精简版的 Chromium 浏览器。
因为Electron是一个能够让你使用JavaScript 调用丰富的原生 APIs 来创造桌面应用，所以你必须掌握JavaScript的知识。
首先，你必须要先安装好nodejs的最新版本。
- 安装electron
npm i electron
有些外网可能连接不上，如果有Timeout的错误时，需要修改host文件。
140.82.114.4 github.com
199.232.69.194 github.global.ssl.fastly.net
- 写代码
新建一个文件夹，里面的文件如下：
- index.html
- style.css
- main.js
- package.json
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
这个Electron应用
</body>
</html>
style.css
body {
width: 100%;
height: 100%;
background-color: aqua;
}
main.js
const { app, BrowserWindow } = require('electron')
function createWindow(){
let win = new BrowserWindow({
width:800,
height:600,
webPreferences:{
nodeIntegration:true
}
})
// 并且为你的应用加载index.html
win.loadFile("index.html");
// 打开开发者工具
// win.webContents.openDevTools();
}
// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow);
app.on("window-all-closed",() => {
// 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
// 否则绝大部分应用及其菜单栏会保持激活。
if (process.platform !== "darwin") {
app.quit();
}
})
app.on('activate', () => {
// 在macOS上，当单击dock图标并且没有其他窗口打开时，
// 通常在应用程序中重新创建一个窗口。
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
// 您可以把应用程序其他的流程写在在此文件中
// 代码 也可以拆分成几个文件，然后用 require 导入。
package.json
{
"name": "myelectrondemo",
"version": "1.0.0",
"description": "",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"build": "electron-packager . app --win --out presenterTool --arch=x64 --overwrite --ignore=node_modules"
},
"author": "",
"license": "ISC",
"devDependencies": {
"electron": "^9.1.2"
}
}
- 查看程序效果
使用
npm start
查看程序效果
- 桌面程序打包，
使用
npm run build
可以把electron项目打包成exe文件。
打包后如下图：
双击app.exe就可以启动electron程序了。
