要做一个electron应用我们需要注意哪些

·  阅读 111

本文不是个从0到1的教程,需要可查阅官方文档

electron是什么

electron是一个开发框架,包含了chrome和nodejs,并且提供了一些api来完成我们所要开发的跨平台应用。

基本架构是这样的:

图源 image.png

其中nodejs在main process工作,是整个应用的入口点,负责

  • 管理window,window认为是一个chrome tab,用来加载相关的html页面,其中的进程被称为renderer process,可以同时有多个window
  • 通过nodejs api完成相关功能
  • 通过electron 提供的api管理应用的生命周期和其他原生桌面功能,比如菜单、通知等。

每个window中有两个相关的script,其中一个由renderer process管理,用法和chrome基本一致。
另一个是Preload scripts,在window加载之前运行,可以同时访问nodejs和chrome两套环境,作用主要有两个

  • 作为render process和main process通信的中介
  • 在window对象上添加相关属性,以允许renderer process可以访问来实现对应功能

开始之前

使用electron的第一个坎就是下载问题,虽然electron给了解决方案,但最终使用中还是通过代理实现的。

set http_proxy=socks5://127.0.0.1:10808

set https_proxy=socks5://127.0.0.1:10808
复制代码

IPC通信方案

在electron应用中,主要包含main process和renderer process,这里主要是讲它们之间怎么通信,具体见这里,下面列一下

  • render to main 单向
ipcRenderer.send
ipcMain.on
复制代码
  • Renderer to main 双向
ipcRenderer.invoke 返回一个promise,是handle的返回值
ipcMain.handle
复制代码

还有一种历史遗留的双向通信,不建议使用

ipcRenderer.send
ipcMain.on(e=>e.reply)
ipcRenderer.on
复制代码
  • Main to renderer
mainWindow.webContents.send
ipcRenderer.on(e=>event.sender.send)
ipcMain.on
复制代码
  • Renderer to renderer
    • main线程做中转

    • main线程往两边发MessagePort

注意在通信中传递的对象要经过Structured Clone Algorithm 算法处理,因此某些不能被序列化的对象不能被传递,比如Element对象。

打包

这里指将源码打包为能安装的应用,这里推荐electron builder,其中提供了自动更新功能,具体步骤可以参考这个demo

Boilerplate

如果和我一样使用react开发,这里建议使用Electron React Boilerplate

分类:
前端
收藏成功!
已添加到「」, 点击更改