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

作者：鐘離，酷家樂PC客戶端負責人
原文地址：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改版成功后，我們積累了許多的寶貴的經驗和最佳實踐。前端社區里關于Electron知識相對較少，因此希望將這些內容以系列文章的形式分享出來。
系列文章：

【Electron】酷家樂客戶端開發實踐分享 — 入坑篇
【Electron】酷家樂客戶端開發實踐分享 — 軟件自動更新
【Electron】酷家樂客戶端開發實踐分享 — 瀏覽器啟動客戶端
【Electron】酷家樂客戶端開發實踐分享 — 進程通信
【Electron】酷家樂客戶端開發實踐分享 — 下載管理器
不定期更新...

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

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

首先拋出一個問題，web應用是桌面客戶端嗎？顯然不是。那么，問題來了，什么樣的軟件才是桌面客戶端呢？我們既然要從web前端轉到客戶端開發，那么就需要了解客戶端，就像我們當初了解web應用一樣。

回到剛剛那個問題，桌面客戶端有兩個重要的特點：

獨立運行于操作系統上（桌面客戶端只是PC，那么限定windows、MacOS、linux這幾個主流PC操作系統）

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

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

瀏覽器能直接運行在操作系統上，而且有自己的GUI，因此瀏覽器是桌面客戶端。

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

這東西能干啥？在經歷了Electron的反復摩擦之后，我總結了Electron的幾個關鍵能力：

NodeJs全部能力，與操作系統交互

operation system 與操作系統相關的操作

HTTP(s)、HTTP2

process、child process 進程相關

file system 文件系統

...省略

Electron提供的基礎模塊，主要與操作系統交互

app 主進程聲明周期管理，控制MacOS任務欄dock、windows任務欄taskbar

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

screen 操作用戶顯示器

globalShortcut 系統級別快捷鍵

...省略

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

解析HTML、CSS、JS

ajax請求

cookie、localstorage

...省略

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

用戶選擇了我們的軟件，我們也要對用戶的電腦負責。能力越大，責任也就越大：

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

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

謹慎操作注冊表、用戶敏感目錄

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

主進程：從整個應用啟動到結束，該進程一直存在。主進程只有一個。

渲染進程：主進程可用創建/銷毀渲染進程，因此渲染進程的生命周期是不固定的。渲染進程可以有多個。

在Electron的API文檔中，會在文檔頂部標識該模塊在哪個進程可用，例如：ipcRenderer

我們回顧一下剛剛講到的執行流程，其中有一個有趣的點，就是Electron的窗口會加載一個HTML來渲染窗口的內容。

HTML，以及HTML加載的css、js文件，統稱為前端資源

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

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

上述代碼在主進程中執行，創建了兩個窗口，窗口并沒加載HTML文件。但是窗口卻是真實存在的，帶有系統標準的控制欄，可拖動，是貨真價實的系統窗口！

我們可以發現，前端資源和窗口是分離的。由主進程創建的的窗口（BrowserWindow），既是一個系統原生窗口，同時也是一個加載&渲染前端資源的容器

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

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

通過file協議加載HTML，無論有沒有網絡，都可以加載到HTML文件，這是file協議核心優勢。缺點也比較明顯：

如果頁面資源要更新，那么只能通過發版來解決（如果你用webview，那么webview的內容就可以自動更新，不過webview也需要有網絡才能加載）

在file協議下，無法通過ajax來請求數據（協議不同），只能通過NodeJs的http(s)模塊來發起網絡請求

通過http協議加載HTML，優點是可以隨時通過web頁面的部署，更新渲染進程的資源，并且在https協議下，你可以在頁面中使用前端熟悉的ajax請求來獲取數據。

當然，缺點也比較明顯：

沒有網絡，并且在你沒有做HTML的緩存時，你的窗口內容無法加載

必須通過https來加載，保證頁面內容的安全性

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

創建主窗口，阻止關閉主窗口關閉的默認事件，不銷毀窗口。（大部分客戶端的主窗口，關閉主窗口的時候，實際上是隱藏了該窗口，例如QQ、微信）

應用退出時，會嘗試關閉所有窗口，再退出應用。如果主窗口的關閉行為默認事件被阻止，那么會導致主窗口無法關閉，整個應用無法退出。因此使用forceQuit這個變量來控制。

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

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",
  }); // 主窗口

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

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

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

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

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

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

}

main();

在本地跑一下這個例子

歡迎大家在評論區討論，技術交流 & 內推 -> zhongli@qunhemail.com