本地桌面客户端入门开发

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 生成效果