Electron基础

Posted 2023-03-26 转角90

1. Electron 是什么？

• 使用github开发的开源框架
• 允许开发者使用Web（js,html,css）技术构建跨平台的桌面应用
• Electron=Chrominum + node.js + Native API
• 高效：通过Web技术写UI
• 能力：底层能力
• 能力&体验：跨平台&原生能力

2. Chromium + Nodejs

Chromium架构

Chromium是谷歌开源的项目，相当于chrome的实验版本，新功能会在chromium上实现

Electron 架构

Electron区分了两种进程：主进程和渲染进程，两者各自负责自己的职能。

Electron 运行package.json的 main 脚本的进程被称为主进程。一个 Electron 应用总是有且只有一个主进程

主进程的作用：

1. 创建多个渲染进程
2. 控制应用的声明周期
3. 调用系统底层功能，调用原生资源
   1. Node API
   2. Native API

渲染进程：渲染进程可以想像成一个浏览器窗口，它能存在多个并且相互独立，不过和浏览器不同的是，它能调用Node API。

1. 用HTML和css渲染界面
2. 使用js进行界面交互
3. 调用API
   1. DOM API
   2. Node API
   3. Electron 提供的渲染进程API

Node架构

Node.js是一个让JavaScript运行在服务端的开发平台，Node使用事件驱动，非阻塞I/O模型而得以轻量和高效。

单单靠Chromium是不能具备直接操作原生GUI能力的，Electron内集成了Nodejs，这让其在开发界面的同时也有了操作系统底层API的能力，Nodejs 中常用的 Path、fs、Crypto 等模块在 Electron 可以直接使用。

系统API

为了提供原生系统的GUI支持，Electron内置了原生应用程序接口，对调用一些系统功能，如调用系统通知、打开系统文件夹提供支持。在开发模式上，Electron在调用系统API和绘制界面上是分离开发的，

总结：

难点：整合事件循序，Node事件循环是基于libuv,但Chromium基于message bump

chromium集成到Node.js: 用libuv实现messagebump(nw)

node.js集成到Chromium

3. 开发桌面应用

3.1 应用场景

3.2 技术选择

Native（C++/C#/Objective-C）

• 高性能
• 原生体验
• 包体积小
• 门口高
• 迭代速度慢

QT

• 基于C++
• 跨平台（Mac/Windows/ios/Android/Linux/嵌入式）
• 高性能
• 媲美原生的体验
• 门槛高
• 迭代速度一般

Flutter

• 跨端（ios/Android/Mac/Windows/Linux/Web）
• PC端在发展中（Mac>Linux,windows）
• 基建少

NW.js

• 跨平台、V0.14.7支持XP
• 迭代块，web技术构建
• 源码加密，支持Chrome扩展
• 不错的社区
• 包体积大
• 性能一般

Electron

• 跨平台（Mac windows linux 不支持XP）
• web技术构建
• 活跃的社区
• 大型应用案例
• 包体积大
• 性能一般

4. Electron 开发

4.1 开发前准备

安装：

npm install electron --save-dev

npm install --arch=ia32 --platform=win32 electron  # 基于32位开发，可以运行在32位和64位之上


# 设置Electron镜像进行加速
ELECTRON_MIRROR=\'https://cdn.npm.taobao.org/dist/electron\' npm install electron --save-dev

4.2 主进程 模块

• 常用模块
  • app: 应用的生命周期
    • ready ：事件被激发后才能创建浏览器窗口
    • app.whenReady()：监听此事件
    • \'window-all-closed\'
      • process.platform !== \'darwin\'app.quit()。
    • activate
  • BrowserWindow: 它创建和管理应用程序 窗口
    • loadFile