全局安裝 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({
width: 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 應用程序或構建無縫集成的網頁。