全局安装 electron
npm install electron -g
# 或者
yarn global add electron@latest
配置 Electron 源
启动应用时，需要下载已经构建好的 Electron dist 包，默认会从 Github 上下载，所以国内下载会很慢或根本无法下载，感谢淘宝提供了镜像源，设置后从国内服务器下载，速度很快。
Ubuntu 临时设置环境变量
# export ELECTRON_MIRROR=https://cdn.npm.taobao.org/dist/electron/
Windows Powershell 临时设置环境变量
$Env:ELECTRON_MIRROR="https://cdn.npm.taobao.org/dist/electron/"
创建基本应用程序
mkdir my-electron-app && cd my-electron-app
npm init -y
npm i --save-dev electron
文件结构如下：
my-electron-app/
├── package.json
├── main.js
└── index.html
创建主脚本文件（main.js）
// 文件路径：main.js
const {
app,
BrowserWindow,
Notification
} = require('electron')
function createWindow() {
const win = new BrowserWindow({
800,
height: 600,
webPreferences: {
// 允许开发者调试工具
devTools: true,
// 允许 node.js 环境
nodeIntegration: true,
},
})
// 加载 index.html
win.loadFile('index.html')
// 打开开发者调试工具
win.openDevTools();
}
app.whenReady().then(createWindow).then(showNotification)
app.on('window-all-closed', () => {
if (process.platform != 'darwin') {
app.quit()
}
})
app.on('activate', () => {
if (BrowserWindow.getAllWindows().length == 0) {
createWindow();
}
})
function showNotification() {
const notification = {
title: 'Base Title',
body: 'Main Content'
}
new Notification(notification).show()
}
创建网页
<!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": "main.js",
"scripts": {
"start": "electron ."
}
}
运行您的应用程序
npm start
打包并分发应用程序
分发你新创建的应用最简单和快捷的方法是使用 Electron Forge。
npx @electron-forge/cli import
✔ Checking your system
✔ Initializing Git Repository
✔ Writing modified package.json file
✔ Installing dependencies
✔ Writing modified package.json file
✔ Fixing .gitignore
We have ATTEMPTED to convert your app to be in a format that electron-forge understands.
Thanks for using "electron-forge"!!!
创建一个分发版本
npm run make
> my-gsod-electron-app@1.0.0 make /my-electron-app
> electron-forge make
✔ Checking your system
✔ Resolving Forge Config
We need to package your application before we can make it
✔ Preparing to Package Application for arch: x64
✔ Preparing native dependencies
✔ Packaging Application
Making for the following targets: zip
✔ Making for target: zip - On platform: darwin - For arch: x64
Electron-forge 会创建 out 文件夹，您的软件包将在那里找到
注意：
使用 Electron Forge 创建分发版本报错
命令：npm run make
错误：Making for the following targets: squirrel
解决方法：修改 package.json 里面的 author 和 description 的字段内容不为空
Electron 包含三个核心：
Chromium 用于显示网页内容。
Node.js 用于本地文件系统和操作系统。
自定义 APIs 用于使用经常需要的 OS 本机函数。
用 Electron 开发应用程序就像构建一个带有网页界面的 Node.js 应用程序或构建无缝集成的网页。