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及中間遇到的坑進行著重介紹。同時歡迎大家關注公眾號前端小苑，我會定期在這里發表原創文章。

總結

以上是生活随笔為你收集整理的JS是世界上最好的语言—— 使用Electron开发桌面应用(一)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。