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

作者：鐘離，酷家樂PC客戶端負責(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)驗和最佳實踐。前端社區(qū)里關(guān)于Electron知識相對較少，因此希望將這些內(nèi)容以系列文章的形式分享出來。
系列文章：

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

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

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

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

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

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

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

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

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

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

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

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

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

HTTP(s)、HTTP2

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

file system 文件系統(tǒng)

...省略

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

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

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

screen 操作用戶顯示器

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

...省略

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

解析HTML、CSS、JS

ajax請求

cookie、localstorage

...省略

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

當然，缺點也比較明顯：

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

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

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

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

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

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

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

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

}

main();

在本地跑一下這個例子

歡迎大家在評論區(qū)討論，技術(shù)交流 & 內(nèi)推 -> zhongli@qunhemail.com