JS是世界上最好的語言—— 使用Electron開發桌面應用(一)

Electron 可以讓你使用純 JavaScript 呼叫豐富的原生(作業系統) APIs 來創造桌面應用。 你可以把它看作一個專注於桌面應用的 Node. js 的變體，而不是 Web 伺服器。

我的學習動機

前陣子用Node+Vue搞了一個小程式的釋出系統，開發期間一直在本地跑直到完成全部功能準備部署到伺服器才發現了一個問題，根據官方的api小程式想要釋出必須要依賴開發者工具！微信開發者工具會在你的本地啟一個web服務，我們獲取到它的埠號然後配合api才能完成上傳。。。這就陷入了一個非常尷尬的局面，他喵的小程式開發者工具沒有能執行在linux伺服器的版本！！！

考慮不周，考慮不周。。。下次注意，程式碼是死的人是活的，線上行不通就想辦法搞到本地吧，那麼問題來了，如何能以最簡單的形式讓其他人的電腦上方便快捷的使用這個系統？要是能搞成一個app裝在電腦上就好了，可我也不會寫app呀，咦。。。等等。。。我JS可是世界上最強大的語言，不如找找有沒有辦法能用JS寫一個app的框架吧 ，結果還真有！！！好吧，我承認我孤陋寡聞了，Electron就這麼出現在了我的視野中，既然要拿它搞事情那就先簡單的學習一下吧。

什麼是Electron？

Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術建立原生程式的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上即可。實際上Electron就是將Chromium和Node.js合併到同一個執行時環境中，根據你的需要將其打包為Mac，Windows和Linux系統下的應用來實現這一目的。Electron有多牛? 這麼說吧VScode和Atom都是用它擼出來的。

瞭解Electron的主程式和渲染器程式

Electron 執行 package.json 的 main 指令碼的程式被稱為主程式。 在主程式中執行的指令碼通過建立web頁面來展示使用者介面。 一個 Electron 應用總是有且只有一個主程式。

由於 Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多程式架構也被使用到。 每個 Electron 中的 web 頁面執行在它自己的渲染程式中。

在普通的瀏覽器中，web頁面通常在一個沙盒環境中執行，不被允許去接觸原生的資源。 然而 Electron 的使用者在 Node.js 的 API 支援下可以在頁面中和作業系統進行一些底層互動。

主程式使用 BrowserWindow 例項建立頁面。 每個 BrowserWindow 例項都在自己的渲染程式裡執行頁面。 當一個 BrowserWindow 例項被銷燬後，相應的渲染程式也會被終止。

主程式管理所有的web頁面和它們對應的渲染程式。 每個渲染程式都是獨立的，它只關心它所執行的 web 頁面。

打造你的第一個Electron應用程式

從開發的角度來看, Electron application 本質上是一個 Node. js 應用程式。 與 Node.js 模組相同，應用的入口是 package.json 檔案。 一個最基本的 Electron 應用一般來說會有如下的目錄結構：

初始化專案

以下示例照搬官網
首先建立一個空資料夾，開啟命令列切換到該目錄下執行yarn init,注意這裡我強烈推薦你使用yarn來安裝本專案所需要的所有依賴，使用npm的話也許開發階段不會有任何問題，但打包階段會出現各種未知bug，但使用yarn會使你避免這些坑，別問為什麼，因為我也不知道，當初打包各種失敗的時候偉大的網友告訴我的, yarn 會幫助你建立一個基本的 package.json 檔案。 其中的 main 欄位所表示的指令碼為應用的啟動指令碼，它將會在主程式中執行。 基本操作，沒什麼好說的，不懂得童鞋自行查詢對應資料。
需要注意的：
如果package.json 中沒有指定main的入口檔案， Electron 將會嘗試載入 index.js 檔案（就像 Node.js 自身那樣）。 Electron的啟動命令是electron, 所以可以在script欄位新增一個命令用來快速啟動專案。如下：

安裝 Electron

現在，你需要安裝electron。把他作為專案中的開發依賴項，在app所在資料夾中執行下面的命令：
yarn add electron

開發一個簡易的 Electron

首先在main.js內引入Electron模組，Electron提供了各種api使你可以呼叫一些原生的方法和ui，引入方法和普通的node模組一樣。
const electron = require('electron')
electron 模組所提供的功能都是通過名稱空間暴露出來的。 比如說： electron.app負責管理Electron 應用程式的生命週期， electron.BrowserWindow類負責建立視窗。 下面是一個簡單的main.js檔案，它將在應用程式準備就緒後開啟一個視窗：

在 main.js 中建立視窗，並處理程式中可能遇到的所有系統事件。 下面我們將完善上述例子，新增以下功能：開啟開發者工具、處理視窗關閉事件、在macOS使用者點選dock上圖示時重建視窗，新增後，main. js 就像下面這樣：

在這個檔案中，你可以續寫應用剩下主程式程式碼。也可以拆分成幾個檔案，然後用 require 匯入。
最後，建立你想展示的 index.html：

啟動你的應用

在建立並初始化完成 main.js、 index.html和package.json之後，您就可以在當前工程的根目錄執行 npm start 命令來啟動剛剛編寫好的Electron程式了。

end

Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium瀏覽器。本章介紹了Electron的基礎使用，在下一篇會以實戰的形式將現有釋出系統轉換為Electron應用的開發過程和使用到的一些api及中間遇到的坑進行著重介紹。同時歡迎大家關注公眾號前端小苑，我會定期在這裡發表原創文章。