官網：http://electronjs.org/docs/tutorial/application-architecture
轉載：https://blog.csdn.net/qq_33323731/article/details/80492191(第一個demo和安裝依賴的包)
一、簡介
Electron 可以讓你使用純 JavaScript 調用豐富的原生 APIs 來創造桌面應用。你可以把它看作是專注於桌面應用而不是 web 服務器的，io.js 的一個變體。這不意味着 Electron 是綁定了 GUI 庫的 JavaScript。
相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。
主進程和渲染器進程
Electron 運行 package.json 的 main 腳本的進程被稱為主進程。 在主進程中運行的腳本通過創建web頁面來展示用戶界面。 一個 Electron 應用總是有且只有一個主進程。
由於 Electron 使用了 Chromium 來展示 web 頁面，所以 Chromium 的多進程架構也被使用到。 每個 Electron 中的 web 頁面運行在它自己的渲染進程中。在普通的瀏覽器中，
web頁面通常在一個沙盒環境中運行，不被允許去接觸原生的資源。 然而 Electron 的用戶在 Node.js 的 API 支持下可以在頁面中和操作系統進行一些底層交互。
主進程和渲染進程之間的區別
主進程使用 BrowserWindow 實例創建頁面。 每個 BrowserWindow 實例都在自己的渲染進程里運行頁面。 當一個 BrowserWindow 實例被銷毀后，相應的渲染進程也會被終止。主進程管理所有的web頁面和它們對應的渲染進程。
每個渲染進程都是獨立的，它只關心它所運行的 web 頁面。在頁面中調用與 GUI 相關的原生 API 是不被允許的，因為在 web 頁面里操作原生的 GUI 資源是非常危險的，而且容易造成資源泄露。 如果你想在 web 頁面里使用 GUI 操作，
其對應的渲染進程必須與主進程進行通訊，請求主進程進行相關的 GUI 操作。
進程間通訊
Electron為主進程（ main process）和渲染器進程（renderer processes）通信提供了多種實現方式，如可以使用ipcRenderer 和 ipcMain模塊發送消息，使用 remote模塊進行RPC方式通信。
二. 准備工作
1.npm的安裝需要下載node.js，安裝完node.js之后npm自然會有,node.js安裝請參考上一篇文章。
2. 首先，我們要安裝electron-prebuilt，它是一個npm模塊，因此我們可以使用Npm來進行安裝，它是一個electron的預編譯版本。
npm install -g electron-prebuilt
3. 接下來安裝electron-packager ，它也是一個npm模塊，是一個用於打包electron應用的工具
npm install -g electron-packager
三、打造一個屬於自己的Electron應用
Electron 可以讓你使用純 JavaScript 調用豐富的原生(操作系統) APIs 來創造桌面應用。 你可以把它看作一個專注於桌面應用的 Node. js 的變體，而不是 Web 服務器。這不意味着 Electron 是某個圖形用戶界面（GUI）庫的 JavaScript 版本。
相反，Electron 使用 web 頁面作為它的 GUI，所以你能把它看作成一個被 JavaScript 控制的，精簡版的 Chromium 瀏覽器。
從開發的角度來看, Electron application 本質上是一個 Node. js 應用程序。 與 Node.js 模塊相同，應用的入口是 package.json 文件。
一個最基本的 Electron 應用一般來說會有如下的目錄結構：
your-app/
├── package.json
├── main.js
└── index.html
1.為你的新Electron應用創建一個新的空文件夾。 打開你的命令行工具，然后從該文件夾運行 npm init
npm init
輸入yes，npm 會幫助你創建一個基本的 package.json 文件。 其中的 main 字段所表示的腳本為應用的啟動腳本，它將會在主進程中執行。
如下片段是一個 package.json 的示例：
{ "name": "myelectron", "version": "1.0.1", "description": "a simple demo", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "DW", "license": "ISC" }
在此我追加一個start腳本來指引 Electron 去執行當前的 package：
{ "name": "myelectron", "version": "1.0.1", "description": "a simple demo", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron ." }, "author": "DW", "license": "ISC" }
2.安裝 Electron
現在，您需要安裝electron。 我們推薦的安裝方法是把它作為您 app 中的開發依賴項，這使您可以在不同的 app 中使用不同的 Electron 版本。 在您的app所在文件夾中運行下面的命令：
npm install --save-dev electron
3.新建一個index.html, 內容如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>hello electron</h1> </body> </html>
4.新建一個main.js, 內容如下：（main.js的文件名對應package.json中main的值）
const {app, BrowserWindow, Menu } = require('electron'); const path = require('path'); const url = require('url'); // 保持一個對於 window 對象的全局引用，如果你不這樣做， // 當 JavaScript 對象被垃圾回收， window 會被自動地關閉 let mainWindow; function createWindow () { //隱藏關閉放大縮小最外層菜單欄目 Menu.setApplicationMenu(null); // 創建瀏覽器窗口。 mainWindow = new BrowserWindow({ title: 'hello Electron', width: 1320, height: 744, icon: __dirname + '/build/icons/app.ico', //這個是引入的icon }); // 然后加載應用的 index.html。 //mainWindow.loadURL(url.format({ // pathname: path.join(__dirname, 'index.html'), // protocol: 'file:', // slashes: true //})) //引用外部文件 // mainWindow.loadURL(`http://www.baidu.com`); // 加載應用的 index.html mainWindow.loadURL('file://' + __dirname + '/index.html'); // 打開開發者工具。 //mainWindow.webContents.openDevTools(); // 打開開發工具 // mainWindow.openDevTools(); // 當 window 被關閉，這個事件會被觸發。 mainWindow.on('closed', () => { // 取消引用 window 對象，如果你的應用支持多窗口的話， // 通常會把多個 window 對象存放在一個數組里面， // 與此同時，你應該刪除相應的元素。 mainWindow = 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 (mainWindow === null) { createWindow() } }) // 在這個文件中，你可以續寫應用剩下主進程代碼。 // 也可以拆分成幾個文件，然后用 require 導入
四. 運行
現在只要在你的myApp目錄下執行npm start 就可以運行了
npm start
五、打包
現在整個過程進行到最后一步，我們需要打包我們自己的應用，那么如何打包，這就需要用到我們先前已經安裝的electron-packager
打開命令行我們可以這樣使用它：
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --electron-version=0.0.1 --overwrite --ignore=node_module
大概格式是這樣的：
electron-packager <應用目錄> <應用名稱> <打包平台> --out <輸出目錄> <架構> <應用版本>
electron-packager . <應用名稱> --win --out ../<輸出目錄> --arch=x64位還是32位 --electron-version=版本號 --overwrite --ignore=node_module
但是每次打包的執行命令太長太麻煩了，所以我們可以把命令寫進package.json中，執行命令調用它就好了。
更改后的package.json如下
{ "name": "myelectron", "version": "1.0.1", "description": "a simple demo", "main": "main.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start": "electron .", "package": "electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --app-version=1.0.1 --electron-version=13.1.1 --overwrite --ignore=node_module" }, "author": "DW", "license": "ISC", "devDependencies": { "electron": "^5.0.1" } }
這樣我們每次打包只需要執行 npm run-script package就可以了
npm run-script package
六.更改圖標
如果我們想要更改窗口左上角的圖標和任務欄的圖標，只需要在打包的命令上加個icon參數就好了
electron-packager . HelloWorld --win --out ../HelloWorldApp --arch=x64 --version=1.0.0 --electron-version=13.1.1 --icon=./app/img/icon.ico