2018-11-05

Electron 学习笔记

最后更新： 2018-11-05

阅读次数：次

Electron 是一个结合了 Chromium、Node.js 和用于调用操作系统本地功能的 API（如打开文件窗口、通知、图标等）的软件框架。

特殊知识点

electron 为 File 对象增加了 path 属性，该属性的值是文件在系统下的真实路径
当在界面中使用 window.open 来创建一个新的窗口时候，将会创建一个 BrowserWindow 的实例，并且将返回一个标识，这个界面通过标识来对这个新的窗口进行有限的控制

webview 标签

webview 标签允许为当前页面嵌入一个任意的页面进来。与 iframe 不同，webview 和你的应用运行的是不同的进程。它不拥有渲染进程的权限，并且应用和嵌入内容之间的交互全部都是异步的。因为这能保证应用的安全性不受嵌入内容的影响。

<webview
  id="webpage"
  src="https://www.github.com"
  style="width:600px; height:480px"
></webview>

主进程

一个 Electron 应用只能存在一个主进程。主进程，通常由运行一个命名为 main.js 的脚本文件产生，该文件是每个 Electron 应用的入口。主进程管理所有的网页页面和与之对应的渲染进程。

主进程可以做：
- 控制应用的生命周期（从打开到关闭）
- 调用系统级别的原生 API
- 创建并管理若干个渲染进程
- 监听各种各样的应用事件
- 注册全局快捷键
- 创建原生菜单、弹窗
- 设置软件自更新
主进程可以使用的 API 有：
- 一部分 Electron API
- 所有的 nodejs API 及其第三方模块

渲染进程

每个 BroswerWindow 实例都在自己的渲染进程里运行着一个网页。每个渲染进程都是相互独立的。

渲染进程可以使用的 API 有：
- 一部分 Electron API
- 所有的 nodejs API 及其第三方模块
- 所有的 Web API

模块介绍

app 模块

app 模块是为了控制整个应用的生命周期设计，其拥有的事件如下：
- ready：当 Electron 完成初始化时被触发
- window-all-closed：当所有的窗口都被关闭并且应用没有被强制退出时触发
- will-quit: 在用户按下 cmd+Q 或调用 app.quit() 时触发。调用 event.preventDefault() 能防止应用被退出
- activate: 当应用被激活时触发，常用于点击应用的 dock 图标的时候

const app = require("app");

app.on("window-all-closed", function() {
  app.quit();
});

ipcMain 与 ipcRenderer

主进程与渲染进程之间通信通过 ipcMain 和 ipcRenderer 模块实现

// In main process
const ipcMain = require("electron").ipcMain;

ipcMain.on("asynchronous-message", function(event, arg) {
  console.log(arg); // prints "ping"
  event.sender.send("asynchronous-reply", "pong");
});

ipcMain.on("synchronous-message", function(event, arg) {
  console.log(arg); // prints "ping"
  event.returnValue = "pong";
});

// In renderer process (web page).
const ipcRenderer = require("electron").ipcRenderer;

console.log(ipcRenderer.sendSync("synchronous-message", "ping")); // prints "pong"

ipcRenderer.on("asynchronous-reply", function(event, arg) {
  console.log(arg); // prints "pong"
});
ipcRenderer.send("asynchronous-message", "ping");

知秋