Electron基础入门教程使用JavaScript开发桌面软件

作为一个刚接触Electron的新手，按照教程搭建完基础项目后遇到几个问题：1) 主进程和渲染进程之间的通信方式除了ipcMain/ipcRenderer还有哪些更简洁的方案？2) 打包后的应用体积过大（超过100MB），如何通过配置优化或依赖管理来缩减体积？3) 在Windows平台下如何解决require(‘electron’).remote被废弃后的替代方案？4) 有没有推荐的热重载方案，每次修改渲染进程代码都要手动重启很麻烦。希望有经验的开发者能分享实际项目中的最佳实践。

3 回复

Electron 是基于 Node.js 和 Chromium 的跨平台桌面应用框架，可以用 JavaScript、HTML 和 CSS 开发。首先安装 Electron：npm install electron --save-dev。创建主进程文件 main.js，负责管理窗口和生命周期。例如：

const { app, BrowserWindow } = require('electron');
let win;
app.whenReady().then(() => {
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });
    win.loadURL(`file://${__dirname}/index.html`);
});

然后编写界面文件 index.html，利用 HTML/CSS/JS 构建用户界面。运行时用 npx electron . 启动。学习重点包括：进程模型（主进程与渲染进程）、模块通信（IPC）、菜单定制及文件系统操作。推荐从官方文档入手，配合实战项目逐步掌握。记住，多动手调试是关键！


《Electron基础入门教程》主要教你用JavaScript、HTML和CSS开发跨平台桌面应用。首先安装Node.js和Electron，创建项目文件夹并初始化npm。然后编写主进程代码加载浏览器窗口，引入preload脚本增强安全性。接着用renderer渲染页面，实现与主进程通信。通过构建菜单和对话框丰富功能，最后打包成exe或dmg。学习时多动手实践，比如仿制一个简易记事本或待办事项应用，熟悉main和renderer的协作机制。记得利用Electron Forge或Vite简化构建流程，让开发更高效。记住遵循最佳实践，避免直接操作DOM或存储敏感信息，提升软件稳定性和用户体验。

Electron基础入门教程

什么是Electron?

Electron是一个使用JavaScript, HTML和CSS构建跨平台桌面应用的框架。它将Chromium和Node.js整合到一个运行时中，让你可以用前端技术开发桌面应用。

基础项目搭建

  1. 首先确保安装了Node.js
  2. 创建一个新项目文件夹并初始化:
mkdir my-electron-app
cd my-electron-app
npm init -y
  1. 安装Electron:
npm install electron --save-dev

基本项目结构

一个最简单的Electron应用通常包含三个文件:

  • main.js - 主进程脚本
  • index.html - 应用界面
  • package.json - 项目配置

最小示例代码

  1. 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('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
  1. index.html:
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Hello Electron</title>
</head>
<body>
    <h1>Hello Electron!</h1>
</body>
</html>
  1. 修改package.json，添加启动脚本:
{
  "scripts": {
    "start": "electron ."
  }
}

运行应用

npm start

核心概念

  1. 主进程和渲染进程: Electron有主进程(管理应用生命周期)和渲染进程(显示网页内容)
  2. 进程间通信: 使用ipcMain和ipcRenderer进行通信
  3. 原生API: 可以访问操作系统API，如文件系统、通知等

这是Electron的最基础入门，你可以在此基础上继续学习更高级的功能如窗口管理、原生菜单、打包发布等。

回到顶部