electron——初探

是什麼？

• Electron是由Github開發，用HTML，CSS和JavaScript來構建跨平臺桌面應用程序的一個開源庫。
• Electron經過將Chromium和Node.js合併到同一個運行時環境中，並將其打包爲Mac，Windows和Linux系統下的應用來實現這一目的。

爲何選擇electron？

先來看一下官方的兩句話

使用 JavaScript, HTML 和 CSS 構建跨平臺的桌面應用

若是你能夠建一個網站，你就能夠建一個桌面應用程序。 Electron 是一個使用 JavaScript, HTML 和 CSS 等 Web 技術建立原生程序的框架，它負責比較難搞的部分，你只需把精力放在你的應用的核心上便可。

若是你是一個前端,你就明白這個有多簡單了

哦,對了!或許你還不知道，Visual Studio Code 、wordpress 和 slack 等客戶端都是基於 Electron 開發的。

1.能夠用 Web 前端技術開發跨平臺的桌面客戶端

這是 Electron 最迷人的地方，究其根本是由於它是創建在 Chromium 和 Node 之上的，一個負責界面，一個負責背後的邏輯，有句話怎麼說來着 你負責貌美如花，我負責賺錢養家，因此Electron 可以開發跨平臺的桌面應用也就能夠理解了。

做爲一名前端小菜鳥來講:

• 能夠用本身熟悉的方式去寫應用界面，ps: 不要和我說什麼java、c語言,鄙人行走江湖就一把js,遇到需求就是幹,學好js,走遍天下都不怕(✿◡‿◡)
• 邏輯部分也仍是 JS，若是你精通 Node ,那就更好了,後端也一併寫了，ps: sorry,會js就是無所不能,我不是針對某個語言,我是說在座的全部,都是。。。(開玩笑,不要打我╥﹏╥...)

so,一個 Web 前端開發者能夠花不多的成本去上手 Electron，而相比於之前開發多平臺客戶端的成本，利用 ELectron 開發多平臺客戶端的成本是極低的

2.能夠從 Node 的生態得到極大的助力

由於 Electron 是基於 Node 的，意味着，Node 這個大生態下的模塊，Electron 也均可以用，這減小了不少造輪子的時間，你要寫一些邏輯將首先思考有沒有成熟的模塊能夠引入，而不是本身吭哧吭哧閉門造車，本身造時間精力會大量得被消耗，上路還可能翻車。

3.爲何須要客戶端?

既然 Electron 是用 Web 技術寫客戶端，那麼看上去 Electron 要作的事，能夠搬到網站上，爲何還要搬到客戶端，這裏有3個角度的回答:

• 用戶角度： 客戶端是一款獨立的軟件，其綜合體驗通常都是比網站高的，尤爲是涉及到「工具」範疇的應用，此外，特定的用戶羣體也會有相似的使用習慣
• 發行方角度： 客戶端是另外一種產品形式，是一種產品的分發方式和入口，客戶端能夠實現不少本地應用獨有的需求去觸達用戶，也能提供更加可靠的服務
• 開發角度： 終於...不用考慮瀏覽器兼容了！！！，Chromium 也足夠開發使用一些先進的 CSS 或 JS 特性，咱們如今還沒計劃引入 webpack 和 babel，由於如今好像夠用，剋制纔是愛，除了寫起來爽，對於開發來講，終於跳出了瀏覽器的沙盒，你能夠本身去控制 Electron 中的「瀏覽器」，莫名的開心

這些綜合起來回答這個小節的問題就是，用 Electron 開發客戶端，用戶體驗好，開發麻煩小，功能更強大，世界更和平~~~

怎麼用？

從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同，應用的入口是 package.json 文件。 一個最基本的 Electron 應用通常來講會有以下的目錄結構：

your-app/
├── package.json
├── main.js
└── index.html

爲你的新Electron應用建立一個新的空文件夾。 打開你的命令行工具，而後從該文件夾運行npm init

npm init

npm 會幫助你建立一個基本的 package.json 文件。 其中的 main 字段所表示的腳本爲應用的啓動腳本，它將會在主進程中執行。 以下片斷是一個 package.json 的示例：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js"
}

注意：若是 main 字段沒有在 package.json 中出現，那麼 Electron 將會嘗試加載 index.js 文件（就像 Node.js 自身那樣）。 若是你實際開發的是一個簡單的 Node 應用，那麼你須要添加一個 start 腳原本指引 node 去執行當前的 package：

{
  "name": "your-app",
  "version": "0.1.0",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  }
}

安裝 Electron

如今，您須要安裝electron。 咱們推薦的安裝方法是把它做爲您 app 中的開發依賴項，這使您能夠在不一樣的 app 中使用不一樣的 Electron 版本。 在您的app所在文件夾中運行下面的命令：

npm install --save-dev electron

開發一個簡易的 Electron

Electron apps 使用JavaScript開發，其工做原理和方法與Node.js 開發相同。 electron模塊包含了Electron提供的全部API和功能，引入方法和普通Node.js模塊同樣：

const electron = require('electron')

electron 模塊所提供的功能都是經過命名空間暴露出來的。 好比說： electron.app負責管理Electron 應用程序的生命週期， electron.BrowserWindow類負責建立窗口。 下面是一個簡單的main.js文件，它將在應用程序準備就緒後打開一個窗口：

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

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

  // 加載index.html文件
  win.loadFile('index.html')
}

app.on('ready', createWindow)

您應當在 main.js 中建立窗口，並處理程序中可能遇到的全部系統事件。 下面咱們將完善上述例子，添加如下功能：打開開發者工具、處理窗口關閉事件、在macOS用戶點擊dock上圖標時重建窗口，添加後，main. js 就像下面這樣：

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

// 保持對window對象的全局引用，若是不這麼作的話，當JavaScript對象被
// 垃圾回收的時候，window對象將會自動的關閉
let win

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

  // 加載index.html文件
  win.loadFile('index.html')

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

  // 當 window 被關閉，這個事件會被觸發。
  win.on('closed', () => {
    // 取消引用 window 對象，若是你的應用支持多窗口的話，
    // 一般會把多個 window 對象存放在一個數組裏面，
    // 與此同時，你應該刪除相應的元素。
    win = null
  })
}

// Electron 會在初始化後並準備
// 建立瀏覽器窗口時，調用這個函數。
// 部分 API 在 ready 事件觸發後才能使用。
app.on('ready', createWindow)

// 當所有窗口關閉時退出。
app.on('window-all-closed', () => {
  // 在 macOS 上，除非用戶用 Cmd + Q 肯定地退出，
  // 不然絕大部分應用及其菜單欄會保持激活。
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // 在macOS上，當單擊dock圖標而且沒有其餘窗口打開時，
  // 一般在應用程序中從新建立一個窗口。
  if (win === null) {
    createWindow()
  }
})

// 在這個文件中，你能夠續寫應用剩下主進程代碼。
// 也能夠拆分紅幾個文件，而後用 require 導入。

最後，建立你想展現的 index.html：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
    We are using node <script>document.write(process.versions.node)</script>,
    Chrome <script>document.write(process.versions.chrome)</script>,
    and Electron <script>document.write(process.versions.electron)</script>.
  </body>
</html>

啓動你的應用

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

參考文章：

Electron，從玩玩具的心態開始，到打造出一款愈來愈優秀的桌面客戶端產品