零、Electron 介紹

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

這不意味著 Electron 是綁定了 GUI 庫的 JavaScript。相反，Electron 使用 web 頁面作爲它的GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。

Github：https://github.com/electron/electron

一、安裝 Node.js

Electron 是基於 Node.js 的，同時 Node.js 也可以用來完成 web 程序無法完成的事情：控制窗體和與系統打交道。

Node.js地址：https://nodejs.org/en/

我們進入 Node.js 主頁，點擊 Download 下載並執行安裝程序，可以直接一直按 Next：

安裝結束後，我們可以通過按下鍵盤 win+R 組合打開 Windows 的運行窗口，在裡面輸入 cmd 打開命令提示符：

我們可以在命令提示符中輸入

npm

來測試 Node.js 是否安裝成功：

沒有出現錯誤就說明安裝完成了。

二、安裝 Electron

有了 Node.js，接下來我們就可以安裝 Electron 了：

Electron 主頁：https://electronjs.org/

我們點擊 Download for Windows 按鈕，來下載它：

下載後運行，稍等片刻會出現 API 文档：

此時就說明安裝完成了。

三、了解 Electron

下載官方的 Demo：

Github 地址：https://github.com/electron/electron-quick-start

解壓、打開，目錄結構如下：

接著，我們來運行一下該 Demo：

重啓命令提示符（win+R 後輸入 cmd）

輸入：

 cd /d 你的工程路徑

來使命令提示符切換到工程目錄内。

輸入：

npm start

來運行 Demo。

Hello world 以及熟悉的 Chrome Inspector 映入眼簾，接下來我們就來了解下該 Demo 的構成：

package.json 文档

存儲了工程配置信息的 json。例如 "version": "1.0.0" 槼定了工程的版本號。

值得注意的幾點是：

"main" 槼定了工程的入口 js，即通過哪個文档來啓動窗體。

main.js 文档

啓動時創建窗體的 js，該文档可在 package.json 内指定。

該文档内已經有詳盡的注釋，在此不再贅述。

值得注意的是，其中：

mainWindow.webContents.openDevTools() 行是啓動 Chrome Inspector 的，如果不想啓動直接刪除該行即可。

index.html 文档

窗體所加載的 HTML 頁面，該文档可在 main.js 内指定。

你可以在此文档中盡情地書寫 HTML + CSS + JavaScript 了。

四、打包 Electron

制作好屬於自己的 Electron 工程後，我們需要將它打包爲可執行程序才可以分享給好友，使好友們雙擊它就可以運行你的作品。

在命令提示符内輸入以下内容來安裝打包工具：

npm i electron-builder

安裝完成後，配置工程的 package.json，在最後一個花括號（}）前添加：

    ,"build": {
      "appId": "your.id",
      "mac": {
        "category": "your.app.category.type"
      }
    }

接下來，我們開始打包：

再次重啓命令提示符（win+R 後輸入 cmd）

將命令提示符切換到工程目錄内：

cd /d 你的工程路徑

開始編譯：

build --win --ia32

（含義：打包爲適用於 windows 系統、32位元的可執行程序。了解更多：Options · electron-userland/electron-builder Wiki · GitHub）

耐心等待打包完成，在 dist\win-ia32-unpacked 目錄下就是你所想要的程序了。

五、使用 jquery

jquery 是一個非常方便的 JavaScript 庫，但在 Electron 中卻可能出現無法使用的狀況。

可以嘗試在引入 jquery 後插入下面的代碼：

    <script>
        if (typeof module === 'object') {
        window.jQuery = window.$ = module.exports;
        };
    </script>

這樣 jquery 就可以正常使用了。

六、Electron 文档

文档地址：https://electronjs.org/docs