從零開始學Electron筆記（一）

前端技術在最近幾年迅猛發展，在任何開發領域我們都能看到前端的身影，從PC端到手機端，從APP到小程式，似乎前端已經無所不能，這就要求我們需要不斷地去學習來提升自己！前段時間尤大通過直播介紹了一下Vue3.0開發的心路歷程並放話今年釋出，Deno v1.0 的釋出，揚言要幹掉Node，摸了摸日漸稀疏的頭髮，表示真心學不動了，但摸了摸乾癟但口袋錶示扶我起來我還能學！

接下來我們要說到但是一個可以開發桌面級應用的框架Electron。

先簡單介紹一下Electron，它是由GitHub團隊開發，目前在GitHub上star已經超過了83k，還是非常受歡迎的。

官方網站：https://www.electronjs.org/

GitHub地址：https://github.com/electron/electron

那Electron到底是個什麼東西呢？官方網站首頁用一句話為我們進行了概括：

使用 JavaScript，HTML 和 CSS 構建跨平臺的桌面應用程式

從上面這句話我們可以看出，作為前端開發者，我們也可以根據基本的web開發語言來開發桌面級的應用，聽起來還是很誘人的，但是還會誘人擔心開發的軟體會不會存在一些與原生語言開發的有差距呢？這點不必擔心，很多大公司也都在用Electron進行開發並有許多非常成功的案例，如我們程式設計師用到的VSCode，Atom等就是基於Electron開發的。

接下來我們來看一張圖來進一步搞清楚Electron：

 

 從上圖可以看出Electron基於了谷歌的核心Chromium，為我們提供了強大的UI支援，使我們不用再考慮各瀏覽器的相容性問題。Node.js為我們提供了強大的後端服務支撐，可以非常方便的整合管理npm包，Native API為我們提供了多平臺的統一API，可以在Windows，Mac和Linux等不同平臺上進行執行。

接下來我們就通過Electron來從最基本的hello world開始進行開發。

首先我們需要安裝Node.js，安裝方式還是很簡單的，在官網上找到下載地址一路確認即可安裝成功。

官網地址：https://nodejs.org/zh-cn/

安裝成功後我們在電腦的命令列工具中輸入 node -v ，npm -v，如果這兩個命令都返回相應的版本資訊說明我們已經安裝成功來，我們最好安裝node v7 以上的版本。

Electron官方網站其實已經為我們初學者提供了一個簡單的應用 https://www.electronjs.org/docs/tutorial/first-app#installing-electron，但是本著開發者的精神我們還是要一步一步地將程式碼進行敲打才能融入到腦子裡，接下來本人寫的程式碼可能跟官方的有些出入，但大體上是一致的。

首先我們在本地建立一個資料夾 electron-demo，然後進入該目錄通過命令列的方式輸入 npm init ，這樣我們就初始化了一個node開發環境，並在資料夾下會生成一個package.json 的檔案，如下：

 

 然後我們通過命令列的方式引入electron包    npm install electron --save ，基於網路原因可能下載會慢一些，我們可以通過淘寶映象的cnpm進行下載。

安裝完成後我們在electron資料夾下建立index.html和index.js檔案，最後目錄結構如下：

 

 我們在index.html內寫入了一個最基本的hello world，就像我們平時寫html檔案一樣，接下來就是重點的index.js檔案了。

const {app, BrowserWindow} = require('electron');

function createWindow() {
    // 建立瀏覽器視窗
    let win = new BrowserWindow({
        width: 800, // 寬
        height: 600, // 高
        webPreferences: { // 啟用node可以在渲染程式中使用
            nodeIntegration: true
        }
    });

    // 並且為你的應用載入index.html
    win.loadFile('index.html');

    // 開啟開發者工具
    win.webContents.openDevTools();

    // 將 win 置為 null，防止佔用記憶體
    win.on('closed', () => {
        win = null;
    });
}

app.on('ready', () => {
    createWindow();
});

在上面的程式碼中，我都加了註釋，程式碼看起來其實並不複雜，就是引入electron，然後根據electron提供的方法開啟一個800*600的視窗。

接下來我們看一下官方為我們提供的js寫法：

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

function createWindow() {
    // 建立瀏覽器視窗
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    })

    // 並且為你的應用載入index.html
    win.loadFile('index.html')

    // 開啟開發者工具
    win.webContents.openDevTools()
}

// Electron會在初始化完成並且準備好建立瀏覽器視窗時呼叫這個方法
// 部分 API 在 ready 事件觸發後才能使用。
app.whenReady().then(createWindow)

//當所有視窗都被關閉後退出
app.on('window-all-closed', () => {
    // 在 macOS 上，除非使用者用 Cmd + Q 確定地退出，
    // 否則絕大部分應用及其選單欄會保持啟用。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，當單擊dock圖示並且沒有其他視窗開啟時，
    // 通常在應用程式中重新建立一個視窗。
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

// 您可以把應用程式其他的流程寫在在此檔案中
// 程式碼 也可以拆分成幾個檔案，然後用 require 匯入。

從上面官方提供的寫法可以看出在 app啟動和關閉時做了相應的操作，這些後續我們會逐步用到。

待index.js完成後我們再對package.json進行如下修改：

{
  "name": "electron-demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron ."
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "electron": "^9.0.5"
  }
}

在 scripts 中增加了一個 start 的啟動方式，接下來我們就可以通過  npm run start 來啟動我們的demo專案來，最終的執行結果如下：

最後我們再來看一下整個專案的執行過程，當我們執行  npm run start 時其實是執行了 package.json 中 scripts 中的  electron . 的命令，然後hi通過 package.json 中的 main 欄位找到 index.js，這個index.js 我們可以隨便命名，一般命名為 main.js，本人只是在 npm init 的時候就用了預設的 index.js，當找到index.js後執行裡面的程式碼，就是我們上面所說的執行electron建立一個視窗，通過 loadFile() 方法執行index.html檔案，生成來一個我們想要的視窗應用。

我們可以理解為package.json中定義的入口檔案main就是主程式，一般一個程式只有一個主程式，一個或多個執行緒，我們可以利用這一個主程式開啟多個執行緒，即開啟了多個類似於index.html的視窗。