Electron与angular4结合实现热更新

  • ELECTRON架构概况
  • Renderer Process （渲染进程）
  • Main Process（主进程）
  • 问题总结
  • 一、jQuery引入
  • 二、使用electron api
  • 三、主进程和渲染进程的理解
  • 四、electron 通过node-ffi调用 dll文件
  • 五、electron的生命周期
  • 六、使用electron-builder和electron-updater实现热更新


ELECTRON架构概况

Electron是由Github开发，用HTML，CSS和JavaScript来构建跨平台桌面应用程序的一个开源库。

Electron通过将Chromium和Node.js合并到同一个运行时环境中，并将其打包为Mac，Windows和Linux系统下的应用来实现这一目的。

Renderer Process （渲染进程）

在electron中，使用Renderer Process渲染页面，也就是说electron app使用Web页面作为UI显示，并且兼容传统的Web页面。electron app开发者可以可选的配置是否支持Node.js。

Main Process（主进程）

electron对Browser Process改动较大，干脆另起一个名字叫Main Process。Main Process 除了原来chromium的runtime，又添加了Node.js的runtime，main.js便运行在此之上。electron将Node.js的message loop和chromium联系起来，使得js中可以灵活的控制页面显示，以及和Renderer Process的IPC通信。

当然原生的Node API和第三方的node module同样支持，并且有electron API提供给开发者控制原生菜单和通知等。
简单来说，Electron为用纯JavaScript创建桌面应用提供了运行时。原理是，Electron调用你在package.json中定义的main文件并执行它。main文件（通常被命名为main.js）会创建一个内含渲染完的web页面的应用窗口，并添加与你操作系统的原生GUI（图形界面）交互的功能。
详细地说，当用Electron启动一个应用，会创建一个主进程。这个主进程负责与你系统原生的GUI进行交互并为你的应用创建GUI（在你的应用窗口）。

问题总结

一、jQuery引入

需要在index.html中添加代码

二、使用electron api

由于typescript与javascript某些对象不一致，导致利用electron 官方api示例时报错，例如navigator，可在使用处declare var navigator来使用外部对象解决。通过require的方式将需要的api引入需要使用的component或者service等等，可以创建一个共通的service将需要的api都放在这里。

开发过程中可将electron所在工程看做a工程，懒加载特性模块。

三、主进程和渲染进程的理解

Electron 运行 package.json 的 main 脚本的进程被称为主进程。 在主进程中运行的脚本通过创建web页面来展示用户界面。 一个 Electron 应用总是有且只有一个主进程。

由于 Electron 使用了 Chromium 来展示 web 页面，所以 Chromium 的多进程架构也被使用到。 每个 Electron 中的 web 页面运行在它自己的渲染进程中。

在普通的浏览器中，web页面通常在一个沙盒环境中运行，不被允许去接触原生的资源。 然而 Electron 的用户在 Node.js 的 API 支持下可以在页面中和操作系统进行一些底层交互。

主进程和渲染进程之间的区别
主进程使用 BrowserWindow 实例创建页面。 每个 BrowserWindow 实例都在自己的渲染进程里运行页面。 当一个 BrowserWindow 实例被销毁后，相应的渲染进程也会被终止。

主进程管理所有的web页面和它们对应的渲染进程。 每个渲染进程都是独立的，它只关心它所运行的 web 页面。

在页面中调用与 GUI 相关的原生 API 是不被允许的，因为在 web 页面里操作原生的 GUI 资源是非常危险的，而且容易造成资源泄露。 如果你想在 web 页面里使用 GUI 操作，其对应的渲染进程必须与主进程进行通讯，请求主进程进行相关的 GUI 操作。

上面是官方描述。

理解：每一个electron都有且只有一个主进程，也就是main脚本，有一个或者多个渲染进程，每一个web页面就是一个渲染进程，渲染进程不允许控制计算机系统级别的操作（例如访问文件夹，使用nodejs和操作系统进行一些底层交互），若有需要，必须通知主进程来执行此操作，因为在web页面进行此操作容易造成资源泄露，主进程控制electron的后台（程序的壳子），electron api中有的是只有主进程可以使用，有的只有渲染进程可以使用，有的两者都可以使用，官方文档把每个api都有划分。

在 Electron 中, 我们有几种方法可以在主进程和渲染进程之间进行通信。 例如使用ipcRenderer和ipcMain模块发送消息，或使用remote模块进行 RPC 方式的通信。

四、electron 通过node-ffi调用 dll文件

为了调用DLL文件，我这里用了nodejs的api ffi，在electron中，我们可以使用任何nodejs的api。

前提条件：安装node-gyp 它需要依赖python2.7（python3以上版本不行）和微软的vc++构建工具来进行编译，所以需要先安装python2.7和微软的vc++构建工具。

安装 ffi : npm install --save ffi

坑：需要对node_modules下的ffi进行针对electron版本重新编译。否则会报错。命令如下

cd ./node_modules/ffi/ && node-gyp rebuild --target=3.0.10 --arch=x64 --target_arch=x64 --dist-url=https://atom.io/download/electron && cd …/ref && node-gyp rebuild --target=3.0.10 --arch=x64 --target_arch=x64 --dist-url=https://npm.taobao.org/mirrors/atom-shell --msvs_version=2015

注：target = electron版本号

五、electron的生命周期

electron由 app 控制你的应用程序的事件生命周期，它是electron的api，应用于主进程。

示例见官方文档：https://electronjs.org/docs/api/app

六、使用electron-builder和electron-updater实现热更新

用electron-builder将项目工程打包，打包成功后会生成一个latest.yml文件，里面包含了版本信息，还有一个exe文件，便是安装程序，点击即可安装。主进程中用electron-updater检查服务器仓库中的项目版本是否高于当前安装版本，通过版本比较实现自动更新。electron-updater会查找latest.yml文件来获取当前版本。

在安装electron-builder的时候，直接npm install electron-builder --save安装了最高版本，打包的时候一直报错，经过多番测试发现是版本的问题，改用electron@3.0.10，electron-builder@20.8.1。

示例代码：https://github.com/ZOUJILIANG/Electron-Angular4-hotUpdate.git