官方文档:
https://www.electronjs.org/docs
依赖
Electron本质上是个Node.js程序。因此依赖Node.js与npm。安装依赖后,输入命令查看版本:
node -v
npm -v
建议使用最新版本node与npm。
在windows平台下,node无法借助n来管理版本,因此直接访问node官网下载最新版本安装即可: http://nodejs.cn/download/
npm则可执行npm install -g npm
命令来更新到最新版本。
创建应用程序
基础的Electron应用程序结构为:
my-electron-app/
├── package.json
├── index.js
└── index.html
创建应用程序流程为:
- 安装Electron。
- 创建主脚本和网页。
- 打包。
安装Electron
- 创建文件夹。
- 打开cmd命令,cd到文件夹下。
- 运行:
npm init
,初始化项目。此时会提示输入一系列信息。 - 运行:
npm install electron --save-dev
,等待安装完成。
这样,Electron就安装完成了。
创建主脚本和网页
首先创建主脚本。
主脚本为Electron的入口,即index.js。示例为:
const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
app.on('window-all-closed', () => {
if (process.platform !== 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow()
}
})
然后创建网页。
示例为:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<meta http-equiv="Content-Security-Policy" content="script-src 'self' 'unsafe-inline';" />
</head>
<body style="background: white;">
<h1>Hello World!</h1>
<p>
We are using node <script>document.write(process.versions.node)</script>,
Chrome <script>document.write(process.versions.chrome)</script>,
and Electron <script>document.write(process.versions.electron)</script>.
</p>
</body>
</html>
创建完成后,调整package.json文件:
{
"name": "my-electron-app",
"version": "0.1.0",
"author": "your name",
"description": "My Electron app",
"main": "index.js",
"scripts": {
"start": "electron ."
}
}
注意:
main
属性即主脚本文件。- 在
scripts
中添加:"start": "electron ."
。注意electron .
中有个空格。
然后即可运行程序:
npm start
打包分发
打包分发使用Electron Forge。
打开cmd并cd到工程根目录下,然后导入Electron Forge:
npx @electron-forge/cli import
等待执行完成。
然后创建分发版本:
npm run make
执行完成后,Electron Forge会创建out文件夹,在其中会找到工程名-win32-x64的文件夹,其中即包含可执行程序。