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