快速上手 Electron 及推荐库

Liumoui

于 2024-07-03 16:00:29 发布

阅读量205

点赞数 2

文章标签： electron javascript 前端

本文链接：https://blog.csdn.net/weixin_65644264/article/details/140154597

版权

### 快速上手 Electron 及推荐库

#### 什么是 Electron?

Electron 是一个基于 Node.js 和 Chromium 的框架，用于构建跨平台的桌面应用程序。它将网页技术（HTML、CSS 和 JavaScript）带入桌面应用开发，允许开发者使用熟悉的前端技术构建功能强大的桌面应用。

#### Electron 的基本概念

1. **主进程和渲染进程**
- **主进程**：运行在 Node.js 环境中，负责控制应用的生命周期和系统级别的操作。
- **渲染进程**：每个 Electron 窗口都有自己的渲染进程，运行在 Chromium 环境中，负责页面的展示和用户交互。

2. **主进程与渲染进程之间的通信**
- 使用 `ipcMain` 和 `ipcRenderer` 模块来实现主进程和渲染进程之间的双向通信。

#### 快速上手步骤

1. **安装 Node.js 和 npm**
- 确保你的系统上安装了 Node.js 和 npm，这是使用 Electron 的前提。

2. **创建 Electron 应用**

   - 创建一个新的项目目录并进入该目录：
     ```bash
     mkdir my-electron-app
     cd my-electron-app
     ```
   - 初始化一个新的 npm 项目：
     ```bash
     npm init -y
     ```
   - 安装 Electron：
     ```bash
     npm install electron --save-dev
     ```

3. **创建项目结构**

在项目根目录下创建一个 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();
  }
});
创建一个 index.html 文件，作为应用的界面：

<!DOCTYPE html>
<html>
<head>
  <title>My Electron App</title>
</head>
<body>
  <h1>Hello, Electron!</h1>
  <p>Welcome to your first Electron app.</p>
</body>
</html>

4.修改 package.json 文件

在 package.json 中添加启动脚本：
"main": "main.js",
"scripts": {
  "start": "electron ."
}

5.启动应用

运行以下命令启动 Electron 应用：
npm start

推荐库
electron-packager

用于打包 Electron 应用，使其可以在不同平台上运行。
安装：npm install electron-packager --save-dev
使用：
npx electron-packager . MyApp --platform=win32 --arch=x64
electron-builder

强大的打包和自动更新工具，支持多种平台和格式。
安装：npm install electron-builder --save-dev
使用：
"scripts": {
  "start": "electron .",
  "pack": "electron-builder --dir",
  "dist": "electron-builder"
}
electron-store

简单易用的数据存储库，用于存储应用的配置和用户数据。
安装：npm install electron-store
使用：
const Store = require('electron-store');
const store = new Store();

// 设置值
store.set('unicorn', '🦄');
console.log(store.get('unicorn')); //=> '🦄'
electron-updater

自动更新功能的实现库，集成了 GitHub、S3 等多种更新源。
安装：npm install electron-updater
使用：
const { autoUpdater } = require('electron-updater');

autoUpdater.checkForUpdatesAndNotify();

总结

通过以上步骤，你可以快速上手 Electron 并创建一个简单的桌面应用。借助推荐的库，你可以进一步增强应用的功能，如打包、数据存储和自动更新等。Electron 的强大之处在于它结合了网页技术和桌面应用的功能，使开发者能够快速构建跨平台的桌面应用。希望这篇文章对你有所帮助，祝你在 Electron 开发之路上顺利！

Liumoui

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
快速上手 Electron 及推荐库

通过以上步骤，你可以快速上手 Electron 并创建一个简单的桌面应用。借助推荐的库，你可以进一步增强应用的功能，如打包、数据存储和自动更新等。Electron 的强大之处在于它结合了网页技术和桌面应用的功能，使开发者能够快速构建跨平台的桌面应用。希望这篇文章对你有所帮助，祝你在 Electron 开发之路上顺利！
复制链接

扫一扫