本地桌面客户端入门开发

1、Electron框架

官网地址：简介 | Electron

2、创建项目并安装依赖

mkdir my-electron-app cd my-electron-app npm init -y npm install electron electron-builder --save-dev

3. 项目结构

my-electron-app/ ├── package.json ├── main.js └── index.html

4. 写主进程main.js

const { app, BrowserWindow } = require('electron'); const path = require('path'); function createWindow() { const win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: false, contextIsolation: true } }); win.loadFile('index.html'); } app.whenReady().then(createWindow); app.on('window-all-closed', () => { if (process.platform !== 'darwin') app.quit(); });

5、写页面index.html

<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>My Electron App</title> </head> <body> <h1>Hello Electron</h1> <p>这是一个最简单的 Electron 桌面应用。</p> </body> </html>

6、配置package.json

把package.json改成这样：

{ "name": "my-electron-app", "version": "1.0.0", "main": "main.js", "scripts": { "start": "electron .", "dist": "electron-builder" }, "build": { "appId": "com.example.myapp", "productName": "MyApp", "directories": { "output": "dist" }, "files": [ "main.js", "index.html" ], "win": { "target": "nsis" }, "mac": { "target": "dmg" }, "linux": { "target": "AppImage" } }, "devDependencies": { "electron": "^33.0.0", "electron-builder": "^24.6.0" } }

这里build字段就是electron-builder的打包配置。

7. 本地运行

npm start

如果能看到一个窗口，里面显示Hello Electron，说明应用已经可以跑起来了。

8. 生成安装包

在 Windows 上执行：

npm run dist

打包完成后，会在dist/目录里生成类似：

dist/ ├── win-unpacked/ └── MyApp Setup 1.0.0.exe

这个.exe就是安装包。

8.1 几个小提示

• 如果你在Windows上跑electron-builder，默认会生成 Windows 安装包。
• 如果你在macOS上跑，会生成.dmg。
• 想只打 Windows 包，可以用：

  npx electron-builder --win

• 图标可以先不加；如果需要自定义图标，再准备icon.ico/icon.icns，并在build.win.icon、build.mac.icon里配置。

8.2 配置国内镜像源

electron-builder打包时要从 GitHub 下载 Electron 二进制包和 NSIS 安装包工具，国内直连经常超时。可以通过配置国内镜像提高速度，在项目根目录my-electron-app/下新建.npmrc文件，内容：

electron_mirror=https://npmmirror.com/mirrors/electron/ electron_builder_binaries_mirror=https://npmmirror.com/mirrors/electron-builder-binaries/

8.3 生成效果