摘要：系列文章酷家樂客戶端開發(fā)實(shí)踐分享入坑篇酷家樂客戶端開發(fā)實(shí)踐分享軟件自動(dòng)更新酷家樂客戶端開發(fā)實(shí)踐分享瀏覽器啟動(dòng)客戶端酷家樂客戶端開發(fā)實(shí)踐分享進(jìn)程通信酷家樂客戶端開發(fā)實(shí)踐分享下載管理器不定期更新本文的初衷所使用的技術(shù)棧和前端工程師完美契合。

作者：鐘離，酷家樂PC客戶端負(fù)責(zé)人
原文地址：https://webfe.kujiale.com/electron-ku-jia-le-ke-hu-duan-kai-fa-shi-jian-fen-xiang-ru-keng-zhi-nan/
酷家樂客戶端：下載地址 https://www.kujiale.com/activity/136
文章背景：在酷家樂客戶端在V12改版成功后，我們積累了許多的寶貴的經(jīng)驗(yàn)和最佳實(shí)踐。前端社區(qū)里關(guān)于Electron知識(shí)相對(duì)較少，因此希望將這些內(nèi)容以系列文章的形式分享出來。
系列文章：

【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 入坑篇
【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 軟件自動(dòng)更新
【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 瀏覽器啟動(dòng)客戶端
【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 進(jìn)程通信
【Electron】酷家樂客戶端開發(fā)實(shí)踐分享 — 下載管理器
不定期更新...

Electron所使用的技術(shù)棧（JavaScript、NodeJs、HTML、CSS）和web前端工程師完美契合。于是，越來越多的前端工程師，用Electron來開發(fā)桌面客戶端的開發(fā)，我也是其中的一員。

雖然Electron技術(shù)棧對(duì)前端工程師比較友好，但是概念較多，和web前端開發(fā)還是有很大差別的，寫個(gè)入坑指南希望能幫助讀者快速上手Electron。

首先拋出一個(gè)問題，web應(yīng)用是桌面客戶端嗎？顯然不是。那么，問題來了，什么樣的軟件才是桌面客戶端呢？我們既然要從web前端轉(zhuǎn)到客戶端開發(fā)，那么就需要了解客戶端，就像我們當(dāng)初了解web應(yīng)用一樣。

回到剛剛那個(gè)問題，桌面客戶端有兩個(gè)重要的特點(diǎn)：

獨(dú)立運(yùn)行于操作系統(tǒng)上（桌面客戶端只是PC，那么限定windows、MacOS、linux這幾個(gè)主流PC操作系統(tǒng)）

有自己的GUI（用戶圖形界面 graphical user interface）

web應(yīng)用有自己的GUI，必須在瀏覽器中執(zhí)行，因此不是桌面客戶端。

瀏覽器能直接運(yùn)行在操作系統(tǒng)上，而且有自己的GUI，因此瀏覽器是桌面客戶端。

在剛剛接觸Electorn的時(shí)候，文檔看的我是眼花繚亂。在某個(gè)加班的深夜，我不禁對(duì)天長嘆：這個(gè)東西到底能干啥？

這東西能干啥？在經(jīng)歷了Electron的反復(fù)摩擦之后，我總結(jié)了Electron的幾個(gè)關(guān)鍵能力：

NodeJs全部能力，與操作系統(tǒng)交互

operation system 與操作系統(tǒng)相關(guān)的操作

HTTP(s)、HTTP2

process、child process 進(jìn)程相關(guān)

file system 文件系統(tǒng)

...省略

Electron提供的基礎(chǔ)模塊，主要與操作系統(tǒng)交互

app 主進(jìn)程聲明周期管理，控制MacOS任務(wù)欄dock、windows任務(wù)欄taskbar

BrowserWindow 控制窗口，在MacOS和windows中窗口非常重要！

screen 操作用戶顯示器

globalShortcut 系統(tǒng)級(jí)別快捷鍵

...省略

Chromium提供的能力，主要提供GUI圖形界面

解析HTML、CSS、JS

ajax請(qǐng)求

cookie、localstorage

...省略

如果用戶安裝了我們的桌面客戶端，那么我們的軟件在用戶電腦上運(yùn)行時(shí)，就有了非常大的權(quán)利，這是把雙刃劍。

用戶選擇了我們的軟件，我們也要對(duì)用戶的電腦負(fù)責(zé)。能力越大，責(zé)任也就越大：

1.注意內(nèi)存的占用，特別是chromium，簡直是內(nèi)存怪獸。可以通過os來獲取用戶電腦的配置，然后根據(jù)電腦的配置和可用資源，來制定合理的策略。

為軟件增加代碼簽名，提升安全性

謹(jǐn)慎操作注冊(cè)表、用戶敏感目錄

一旦被貼上【流氓軟件】、【不好用】的標(biāo)簽，就很難再改變用戶的印象了。

主進(jìn)程：從整個(gè)應(yīng)用啟動(dòng)到結(jié)束，該進(jìn)程一直存在。主進(jìn)程只有一個(gè)。

渲染進(jìn)程：主進(jìn)程可用創(chuàng)建/銷毀渲染進(jìn)程，因此渲染進(jìn)程的生命周期是不固定的。渲染進(jìn)程可以有多個(gè)。

在Electron的API文檔中，會(huì)在文檔頂部標(biāo)識(shí)該模塊在哪個(gè)進(jìn)程可用，例如：ipcRenderer

我們回顧一下剛剛講到的執(zhí)行流程，其中有一個(gè)有趣的點(diǎn)，就是Electron的窗口會(huì)加載一個(gè)HTML來渲染窗口的內(nèi)容。

HTML，以及HTML加載的css、js文件，統(tǒng)稱為前端資源

如果不加載HTML的，客戶端還能用嗎？不妨來試試

    // main process
    const win1 = new BrowserWindow();
    const win2 = new BrowserWindow();

上述代碼在主進(jìn)程中執(zhí)行，創(chuàng)建了兩個(gè)窗口，窗口并沒加載HTML文件。但是窗口卻是真實(shí)存在的，帶有系統(tǒng)標(biāo)準(zhǔn)的控制欄，可拖動(dòng)，是貨真價(jià)實(shí)的系統(tǒng)窗口！

我們可以發(fā)現(xiàn)，前端資源和窗口是分離的。由主進(jìn)程創(chuàng)建的的窗口（BrowserWindow），既是一個(gè)系統(tǒng)原生窗口，同時(shí)也是一個(gè)加載&渲染前端資源的容器

窗口通常會(huì)通過file協(xié)議和http(s)協(xié)議來加載前端資源，接下來我們看看這兩種方式的區(qū)別。

在Electron的官方入門例子中，就是通過file協(xié)議來加載HTML的

通過file協(xié)議加載HTML，無論有沒有網(wǎng)絡(luò)，都可以加載到HTML文件，這是file協(xié)議核心優(yōu)勢。缺點(diǎn)也比較明顯：

如果頁面資源要更新，那么只能通過發(fā)版來解決（如果你用webview，那么webview的內(nèi)容就可以自動(dòng)更新，不過webview也需要有網(wǎng)絡(luò)才能加載）

在file協(xié)議下，無法通過ajax來請(qǐng)求數(shù)據(jù)（協(xié)議不同），只能通過NodeJs的http(s)模塊來發(fā)起網(wǎng)絡(luò)請(qǐng)求

通過http協(xié)議加載HTML，優(yōu)點(diǎn)是可以隨時(shí)通過web頁面的部署，更新渲染進(jìn)程的資源，并且在https協(xié)議下，你可以在頁面中使用前端熟悉的ajax請(qǐng)求來獲取數(shù)據(jù)。

當(dāng)然，缺點(diǎn)也比較明顯：

沒有網(wǎng)絡(luò)，并且在你沒有做HTML的緩存時(shí)，你的窗口內(nèi)容無法加載

必須通過https來加載，保證頁面內(nèi)容的安全性

方便讀者更好理解上文的內(nèi)容，寫了一個(gè)小demo，源代碼地址 https://github.com/littlecold233/electron-demo，例子有以下特點(diǎn)：

創(chuàng)建主窗口，阻止關(guān)閉主窗口關(guān)閉的默認(rèn)事件，不銷毀窗口。（大部分客戶端的主窗口，關(guān)閉主窗口的時(shí)候，實(shí)際上是隱藏了該窗口，例如QQ、微信）

應(yīng)用退出時(shí)，會(huì)嘗試關(guān)閉所有窗口，再退出應(yīng)用。如果主窗口的關(guān)閉行為默認(rèn)事件被阻止，那么會(huì)導(dǎo)致主窗口無法關(guān)閉，整個(gè)應(yīng)用無法退出。因此使用forceQuit這個(gè)變量來控制。

使用http或者file協(xié)議加載窗口前端資源（例子中，默認(rèn)加載的是微信）

const { app, BrowserWindow } = require("electron")

async function main () {
  await app.whenReady();

  let forceQuit = false;

  const majorWindow = new BrowserWindow({
    title: "主窗口",
    width: 1000,
    height: 750,
    minWidth: 1000,
    minHeight: 750,
    backgroundColor: "#f2f2f2",
  }); // 主窗口

  // 阻止標(biāo)題更新
  majorWindow.on("page-title-updated", (e) => {
    e.preventDefault();
  });

  majorWindow.on("close", (e) => {
      // 用戶希望退出的時(shí)候，不作處理，默認(rèn)會(huì)銷毀這個(gè)窗口
      if (forceQuit) return;
      e.preventDefault();

      // macOS全屏的處理
      if (majorWindow.isFullScreen()) {
        majorWindow.once("leave-full-screen", () => {
          majorWindow.hide();
        });
        majorWindow.setFullScreen(false);
      } else {
        majorWindow.hide();  // 隱藏窗口
      }
  });

  // 點(diǎn)擊dock打開主窗口
  app.on("activate", () => {
    majorWindow.show();
  });

  // 用戶使用cmd + Q、代碼中調(diào)用app.quit等情況
  // 此時(shí)用戶希望能夠退出應(yīng)用，因此將forceQuit改為true
  app.on("before-quit", () => {
    forceQuit = true;
  });
  
  app.dock.setIcon("./img/icon.png"); // 在app打包后，這一句代碼其實(shí)是不需要的

  majorWindow.loadURL("https://wx.qq.com"); // http協(xié)議加載前端資源，隨便加載一個(gè)微信試試
  // majorWindow.loadURL("file://index.html"); // file協(xié)議加載前端資源

}

main();

在本地跑一下這個(gè)例子

歡迎大家在評(píng)論區(qū)討論，技術(shù)交流 & 內(nèi)推 -> [email protected]