electron简析

什么是electron

electron是一个可以用HTML、CSS、JS来构建桌面应用的程序,并且具有跨平台型。

electron的重要性

一般来说,桌面应用在不同的系统上需要不同的原生语言。electron,可以让你的桌面应用兼容大多数流行平台。

组成

electron组合chromium和nodejs,并且为原生操作系统暴露出一些自定义的api,比如吊起文件dialog,通知栏,等等
alt

开发体验

开发electron就像构建一个网页一样,你可以无缝使用nodejs。并且你不需要考虑兼容性。

进程

  • 主进程:package.json中的main对应的文件执行后是主进程
  • 渲染进程:每个electron页面都运行着自己的进程,称为渲染进程

联系和区别

  • 主进程,一般来说是main.js。这是整个electron app的入口,控制着app的生命周期,从打开到关闭,控制着打开原生元素,和创建新的渲染进程。并且集成nodejs api

alt

  • 渲染进程:说白了渲染进程就是app的浏览器窗口,不像主进程,这可以有多个,并且相互独立。也可以被隐藏,一般来说命名为index.html,html中有着通用文件特性,但有一点,你可以使用node api。

alt

主进程使用browserWindow实例创建页面(node层使用browserWindow创建实例),每个browserWindow实例都在自己的渲染进程里运行页面。当一个实例被销毁后,相应的渲染进程也会被终止。(页面层使用remote-本质是eventEmmiter)
主进程管理所有页面和与之对应的渲染进程。每个渲染进程都是相互独立的,并且只关心他们自己的页面。
几乎所有与底层API进行交互的逻辑都需要在主进程调用。

联想一波

electron的渲染进程就像谷歌或者其他浏览器中的每个tab,每个web页面就是一个渲染进程
如果你关闭所有的tab,chrome仍然没有关闭,这就像主进程,你可以打开新的窗口或退出整个app

alt

通讯方式 参考

  1. ipcmain 主进程使用 ipcrender 渲染进程使用
  2. remote 渲染进程使用

本质上是事件的监听订阅。

开发方案

非单页

  • electron
  • hbs(等模板)
    使用hbs渲染模板,根据机器语言不同的页面风格。使用hbs打包到目标目录,electron直接loadurl。简单高效。

单页

  • electron
  • mvvm框架
  • store
  • router
    语法是大家所熟悉,不需要再去熟悉模板语言,开发效率高,目录结构清晰,单页用户体验好,不涉及seo问题,但是不支持服务端渲染,除非只做一个架子,但是还得考虑请求时间,毕竟electron是直接加载本地文件。
    建议还是开发单窗口应用,比如网易云音乐。

两个问题

  1. 为什么browserWindow在渲染进程中找不到
    渲染进程本身就是一个browserWindow实例,有些api是通用的有些不是,要是想在渲染进程中使用browserWindow需要引入remote模块
  2. 想在渲染进程使用主进程的api
    需要使用通信,让主进程代劳

参考1
参考2