Electron快速入门与实践

简介: Electorn是由GitHub开发的一个开源框架,可用于开发桌面应用程序

image.png

Electron是由GitHub开发的一个开源框架,可用于开发桌面应用程序,Node + Chromium的开发使得它拥有强大的跨平台能力,我们所熟知的GitHubAtom和微软Visual Studio Code都是Electron应用程序。

image.png

1. 桌面应用的优势

• 快速打开\
• 离线可用\
• 调用系统API • 安全\
• ...

2. 各大桌面应用开发技术对比

原生桌面技术开发

  • 性能好
  • 功能强大
  • 包体积相对小
  • 门槛高
  • 开发效率低

QT 桌面技术开发

  • 跨平台(支持主流操作系统)
  • 高性能
  • 接近原生应用的体验
  • C++ 开发门槛较高
  • 开发效率一般

Flutter

• 跨平台、跨端\
• 基于web技术\
• 桌面端尚未成熟 • 生态发展不完善

NW.js

• 跨平台\
• 基于web技术\
• 源码加密、支持chrome扩展 • 社区支持可\
• 开发效率高\
• 体积大、性能一般

Electron

• 跨平台\
• 基于web技术\
• 社区活跃、生态好 • 实践案例多\
• 开发效率高\
• 体积大、性能一般

3. 架构图

image.png

4. 安装与环境

环境依赖: node.js & npm

IDE: Visual Studio Code or 任意编辑器

快速开始:

npm i electron
AI 代码解读

5. 一个最简的Demo

image.png

了解主进程模块

const { app, BrowserWindow, ipcMain} = require(‘electron’)

  • app 应用的生命周期,例如 app.on(‘ready’,callback)
  • BrowserWindow 控制窗口
let win = new BrowserWindow({width, height, ...}) // 创建窗口
win.loadURL(url)、win.loadFile(path) // 加载远程或本地页面
AI 代码解读
  • Notification 通知
let notification = new Notification({title, body, actions:[{text, type}]})
notification.show()
AI 代码解读
  • ipcMain.handle(channel, handler) 主线程,继承 Event Emitter

6. 主进程与渲染进程

1. 主进程负责什么

  • package.json 的 main 脚本
  • 一个应用一个主进程
  • 原生GUI的调度管理,例如BrowserWindow、Tray、 Dock、Menu
  • app 应用生命周期
  • 创建渲染进程

2. 渲染进程负责什么

  • 展示webui的进程
  • 借助node.js、electron,拥有更多原生能力
  • 一个应用,多个渲染进程

3. IPC(Inter-Process Communication,进程间通信)

  • 通知事件、数据传输、数据共享
  • 主进程的ipcMain和渲染进程的ipcRenderer
  • 继承自EventEmitter

4. 从渲染进程到主进程

  • Callback 写法:
ipcRenderer.send
ipcMain.on
AI 代码解读
  • Promise 写法 (Electron 7.0 之后,处理请求 + 响应模式)
ipcRenderer.invoke
ipcMain.handle
AI 代码解读

7. 优势总结

  • 不必再为兼容性而烦恼
  • 使用chrome的最新特性,无需polyfill • es标准中最新语法
  • 无跨域,请求走nodejs
  • 读取本地文件
目录
打赏
0
0
0
0
119
分享
相关文章
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
【HarmonyOS 4.0 应用开发实战】TypeScript 快速入门之环境配置
255 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
【4月更文挑战第30天】本文介绍了Flutter SDK的安装和配置过程,以及如何创建并运行第一个Flutter应用。首先确保安装了Dart SDK和Flutter SDK,支持macOS、Linux和Windows。安装完成后,设置环境变量,然后通过`flutter doctor`验证安装。接着,使用`flutter create`命令创建新项目,进入项目目录并运行`flutter run`启动应用。在`main.dart`中修改代码以自定义应用。Flutter支持热重载和DevTools调试。本文为Flutter初学者提供了快速入门的指导。
159 0
【Flutter前端技术开发专栏】Flutter入门指南:搭建开发环境与第一个应用
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
技术笔记:ReactNative学习笔记(一)————(RN)快速入门
121 0
前端学习笔记202307学习笔记第六十一天-搭建dart环境2
前端学习笔记202307学习笔记第六十一天-搭建dart环境2
72 0
微信小程序从零开始开发步骤(一)搭建开发环境
微信小程序从零开始开发步骤(一)搭建开发环境
180 0
高性能服务器Nodejs快速入门 2
高性能服务器Nodejs快速入门
86 0