Electron入门
1.Electron 是什么？
Electron是一个开源的跨平台框架，用于构建使用Web技术（HTML、CSS和JavaScript）开发的桌面应用程序。它由GitHub公司开发并维护，并在许多知名应用程序中得到广泛应用，如Atom、Visual Studio Code、Slack等。
Electron允许开发者使用熟悉的前端开发技术来构建跨平台的桌面应用，它利用Chromium渲染引擎来显示用户界面，并使用Node.js来访问底层系统资源和功能，例如文件系统、操作系统API等。这使得开发者可以使用Web技术来创建功能丰富的桌面应用，无需学习特定的桌面应用开发语言。
使用Electron，开发者可以将其Web应用打包为独立的桌面应用，可以在Windows、macOS和Linux等多个操作系统上运行。这为开发者提供了更大的灵活性和便利性，同时也为用户提供了一致的用户体验。
2.网址：
https://www.electronjs.org/zh/docs/latest/tutorial/quick-start
3.创建项目
3.1 初始化项目
mkdir my-electron-app
cd my-electron-app
npm init
3.2安装electron
npm install --save-dev electron
3.3在package.json配置文件中的scripts字段下增加一条start命令
"start": "electron ."
3.4 创建main.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('activate', function () {
if (BrowserWindow.getAllWindows().length === 0) createWindow();
});
});
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit();
});
3.5创建index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>你好!</title>
</head>
<body>
<h1>你好!</h1>
我们正在使用 Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
和 Electron <span id="electron-version"></span>.
</body>
</html>
3.6 electron-builder打包electron打包
3.6.1 安装 electron-builder
npm install electron-builder -g
3.6.2 配置 package.json 文件
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "firstElectron",
"main": "main.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "electron .",
"build": "electron-builder",
"dist": "electron-builder --win --x64",
"build:win": "electron-builder --win",
"build:mac": "electron-builder --mac",
"build:linux": "electron-builder --linux"
},
"author": "admin",
"license": "ISC",
"devDependencies": {
"electron": "^25.3.0"
},
"build": {
"appId": "com.myelectronapp.app",
"productName": "My Electron App",
"directories": {
"output": "dist"
},
"mac": {
"category": "public.app-category.utilities"
},
"win": {
"target": ["nsis","zip"],
"icon": "build/icon.ico"
},
"nsis": {
"oneClick": false,
"perMachine": true,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "build/exe.ico",
"uninstallerIcon": "build/exe.ico",
"installerHeaderIcon": "build/exe.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "My Electron App"
}
}
}
3.6.3 构建：npm run build:win
3.6.4 打包后的文档结构
效果：
