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及中間遇到的坑進行着重介紹。同時歡迎你們關注公衆號前端小苑，我會按期在這裏發表原創文章。