Electron基础入门，用HTML/CSS/JS开发桌面应用

作为一个刚接触Electron的新手，想用HTML/CSS/JS开发桌面应用，但有几个疑惑想请教：

  1. Electron和普通Web开发有哪些主要区别？需要特别注意哪些桌面端特有的问题？
  2. 如何实现Electron应用与操作系统的交互，比如文件系统访问或系统通知？
  3. 应用打包后体积较大，有哪些优化方案可以减小安装包大小？
  4. 主进程和渲染进程之间的通信机制具体怎么实现？能否举个实际案例说明？
  5. 在安全性方面，开发Electron应用时需要特别注意哪些风险？如何防范？
3 回复

Electron 是一个使用 Web 技术（HTML、CSS、JavaScript）构建跨平台桌面应用程序的框架。以下是基础入门步骤：

  1. 安装 Node.js 和 npm
    Electron 需要 Node.js 环境，下载并安装 Node.js，npm（Node 包管理器）会随它一起安装。

  2. 创建项目目录和初始化
    创建一个文件夹，运行 npm init -y 生成 package.json 文件。

  3. 安装 Electron
    在项目目录中运行 npm install electron --save-dev，添加 Electron 为开发依赖。

  4. 编写主进程代码
    创建 main.js，这是 Electron 的主进程入口：

    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);

  5. 编写渲染进程代码
    创建 index.html，这是你的网页界面：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Electron App</title>
</head>
<body>
    <h1>Hello Electron!</h1>
</body>
</html>

  6. 启动应用
    修改 package.json 添加脚本：

    "scripts": {
    "start": "electron ."
}

    运行 npm start 启动应用。

  7. 调试与扩展
    使用 Chrome DevTools 调试，探索更多 API（如菜单栏、托盘等）。

通过这些步骤，你可以快速上手 Electron，开发自己的桌面应用！


Electron 是一个使用 HTML、CSS 和 JavaScript 构建跨平台桌面应用程序的框架。以下是入门指南：

  1. 安装 Node.js：首先确保已安装 Node.js（https://nodejs.org/），Electron 需要它来运行。

  2. 创建项目目录：

    mkdir my-electron-app
cd my-electron-app

  3. 初始化 npm：

    npm init -y

  4. 安装 Electron：

    npm install electron --save-dev

  5. 配置启动脚本： 在 package.json 中添加启动脚本：

    "scripts": {
    "start": "electron ."
}

  6. 创建主进程文件 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();
    }
});

  7. 创建前端页面 index.html：

    <!DOCTYPE html>
<html>
<head>
    <title>Electron App</title>
</head>
<body>
    <h1>Hello Electron!</h1>
    <button onclick="alert('Hello World')">Click Me</button>
</body>
</html>

  8. 运行应用：

    npm start

完成以上步骤后，即可看到一个简单的 Electron 应用程序运行在桌面上。后续可以扩展功能，如菜单栏、系统托盘等。

Electron基础入门指南

Electron是一个使用JavaScript, HTML和CSS构建跨平台桌面应用的框架。以下是基础入门知识：

基本概念

  • 主进程：运行package.json中main脚本的进程，管理应用生命周期
  • 渲染进程：每个Electron网页运行在自己的渲染进程中
  • IPC：进程间通信机制

快速开始

  1. 初始化项目：
mkdir my-electron-app && cd my-electron-app
npm init -y
npm install electron --save-dev
  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)

index.html (渲染进程):

<!DOCTYPE html>
<html>
<head>
    <title>Electron App</title>
</head>
<body>
    <h1>Hello Electron!</h1>
</body>
</html>

package.json中添加启动脚本:

"scripts": {
  "start": "electron ."
}

常用功能

  1. 调用系统API：
const { shell } = require('electron')
shell.openExternal('https://github.com')
  1. 菜单栏：
const { Menu } = require('electron')
const template = [
  {
    label: '文件',
    submenu: [
      { role: 'quit' }
    ]
  }
]
Menu.setApplicationMenu(Menu.buildFromTemplate(template))
  1. IPC通信示例：

主进程:

const { ipcMain } = require('electron')
ipcMain.on('message', (event, arg) => {
  console.log(arg) // 打印来自渲染进程的消息
  event.reply('reply', 'pong') // 回复消息
})

渲染进程:

const { ipcRenderer } = require('electron')
ipcRenderer.send('message', 'ping')
ipcRenderer.on('reply', (event, arg) => {
  console.log(arg) // 打印"pong"
})

打包应用

使用electron-packager:

npm install electron-packager --save-dev
npx electron-packager . --platform=win32 --arch=x64

Electron让Web开发者可以轻松进入桌面应用开发领域，同时保持跨平台兼容性。

回到顶部