Electron框架

阅读数:21 评论数:0

跳转到新版页面

分类

html/css/js

正文

一、概述

Electron 是一个开源框架，用于构建跨平台的桌面应用程序。它由 GitHub 开发和维护，结合了 Chromium 和 Node.js 的功能，使开发者能够使用 Web 技术（如 HTML、CSS 和 JavaScript）创建桌面应用程序。

1、架构

Electron 的架构主要包括两个进程：主进程（Main Process）和渲染进程（Renderer Process）。

（1）主进程

  • 负责控制应用的生命周期和系统级操作。
  • 可以创建和管理多个渲染进程。
  • 使用 Node.js API 进行文件系统操作、网络请求等。

（2）渲染进程

  • 每个窗口（或标签页）都有一个独立的渲染进程。
  • 使用 Chromium 渲染页面，类似于一个独立的浏览器实例。
  • 可以使用 Web 技术（HTML、CSS、JavaScript）来构建用户界面。

2、优点

  • 开发效率高：使用 Web 技术和现有的前端工具链，开发桌面应用的效率高。

  • 跨平台支持：一次开发，多平台运行，减少了维护和开发成本。

  • 活跃的社区：Electron 拥有一个活跃的社区，提供了大量的插件、工具和示例代码。

  • 快速原型开发：适合快速原型开发和 MVP（最小可行产品）构建。

3、缺点

  • 性能问题：由于使用 Chromium 渲染，Electron 应用的内存和 CPU 占用可能较高，尤其是对于大型应用。

  • 应用体积大：Electron 应用通常较大，因为需要包含 Chromium 和 Node.js 的运行时。

  • 安全性问题：需要特别注意安全性，防止跨站脚本攻击（XSS）和其他安全漏洞。

二、创建一个简单的Electron应用

1、安装Electron

npm install electron --save-dev

2、创建项目结构

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

3、编写package.json

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^latest"
  }
}

4、编写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();
  }
});

5、编写index.html

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

6、运行应用

npm start
相关推荐
npm工具的学习
一、概述 npm的全称是Node Package Manager，是随同ＮodeJS一起安装的包管理和发布工具。 不过现在更推荐使用pnpm工具，使用过pnpm就真得不太愿意用npm了，因此pnpm一
windows上使用nvm管理nodejs版本
一、概述 使用nvm可以在同一台机器上安装和切换不同版本node的工具。 二、使用 1、下载+安装 https://github.com/coreybutler/nvm-windows/release