Electron客户端开发入门必备的知识点

这一篇想来想去，觉得还是太庞大了不好下手，，看着不如干着，莫不如我们直接从新建一个 Electron 项目开始入手，然后研究一下其他一些重要问题。

如何新建一个 Electron 项目？

可以先看看简书上这篇，个人觉得写的算是比较清晰易懂了：

electron快速入门笔记： https://www.jianshu.com/p/f134878af30f

然后自己新建一个 Electron 项目，在项目中输出 Hello World！

Electron 的背景信息

搭建完这个 Electron 项目后，相信大家对 Electron 已经有了初步的认知，接下来我们可以查看文档来获取 Electron 更多的背景信息： https://electronjs.org/docs/tutorial/about

我们知道 Electron 使用了 Chromium 的渲染库，我们可以把它看作一个精简版的 Chromium 浏览器。

Electron 里，存在一个主进程和一个渲染进程，我们可以在下文中看到主进程和渲染进程的区别： https://www.w3cschool.cn/electronmanual/p9al1qkx.html

当我们运行一个 Electron 客户端时，客户端窗口是如何打开的？

这部分内容前面的几篇文章里也有，比较重要，这里单独拿出来再说一下：

我们在 package.json 中可以找到 "main" 属性，一般为 {"main": "./main"}；

这里我们就是启动了主进程 main.js，我们打开 main.js 文件，可以看到如下代码：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const url = require('url');

let window;

function createWindow() {
  window = new BrowserWindow({ width: 1200, height: 900 });

  window.loadURL(url.format({
    pathname: path.join(__dirname, './index.html'),
    protocol: 'file:',
    slashes: true
  }));

  // 打开调试工具.
  window.webContents.openDevTools();

  // 当 window 关闭时触发.
  window.on('closed', () => {
    window = null
  })
}

// 'ready' 后开始 createWindow
app.on('ready', createWindow);

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});

app.on('activate', () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (window === null) {
    createWindow();
  }
});

我们可以看到这个文件中有一些 app.on 来接收事件，当 app.on('ready', createWindow) 时，我们调用了 createWindow 函数；在 createWindow 函数中创建了 new BrowserWindow，然后进入了 ./index.html 文件。

备注：我们可以在这个文档中查到更多的事件： https://electronjs.org/docs/api/app

回到我们的小班教室和 1vN 客户端，我们来简单介绍下我们用到的一些事件：

'ready': 当 Electron 完成初始化时被触发。
'open-url': 当用户想要在应用中打开一个 URL 时发出。
'activate': 当应用被激活时发出。
'before-quit': 在应用程序开始关闭窗口之前触发。
'window-all-closed': 当所有的窗口都被关闭时触发。

主进程（main）和渲染进程（renderer）间的通信

在项目开发中，我们总会有时候，需要在 main 和 renderer 之间进行通信，Electron 提供了相应的通信方法：

ipcMain： https://electronjs.org/docs/api/ipc-main#ipcmain
ipcRenderer： https://electronjs.org/docs/api/ipc-renderer#ipcrenderer

在我们的客户端中，引入了 'electron-ipc' 库，使得通信方法更加简单：

const ipcp = require('electron-ipc');

// 发送
ipcp.publish('msgName', 'sendInfo');

// 接收
ipcp.subscribe('msgName', (msg) => {
    console.log('msg', msg)  // 'msg' 'sendInfo'
})

其中 'msgName' 是通道名（channel）。

如果我们想要在 subscribe 接收到消息之后再在 publish 的地方做出相关处理，则可以采用如下方式：

const ipcp = require('electron-ipc');

// 发送
ipcp.publish('msgName', 'sendInfo').then((res) => {
    console.log('res', res)  // 'res' 'msg has been accepted'
});

// 接收
ipcp.subscribe('msgName', (msg) => {
    console.log('msg', msg)  // 'msg' 'sendInfo'
    return 'msg has been accepted'
})

这个依赖库让我们使用 ipc 通信更加简单，无需再考虑 main 和 renderer 的不同写法。具体实现逻辑可以查看源码，，源码中实际上只是做了一丢丢判断：

const IS_RENDERER = typeof window !== 'undefined' && window.process && window.process.type === 'renderer'
const TARGET = IS_RENDERER ? electron.ipcRenderer : electron.ipcMain