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