[TOC] #### 1. 前言 --- electron 官網：<https://www.electronjs.org> electron 是跨平臺桌面應用開發工具，它兼容 mac、windows、linux，可以構建出三個平臺的應用程序 學習的好處：開發的應用程序，可以上架到應用商店獲得收益，也可以提高應聘時的競爭力，提高開發者的綜合能力 #### 2. 安裝 --- 初始化項目：運行以下命令即可，會生成一個 package.json 文件 ```bash npm init -y ``` 安裝 electron 依賴，安裝中比較慢或遇到其他問題, [點擊查看解決方案](http://www.g-eproperties.com/index/622.html) ```bash npm install -D electron ``` #### 3. 初始化項目 --- 如下所示，在 package.json 文件中可以看到主進程文件默認為 index.js，我們在項目根目錄下創建這個文件 ```json { "main": "index.js" } ``` 并且在 index.js 文件中添加以下代碼 ```javascript const { BrowserWindow, app } = require('electron'); // 應用啟動后創建窗口 app.whenReady().then(() => { const mainWindow = new BrowserWindow({ width: 300, height: 300, }) }) ``` 修改 package.json 文件，添加運行腳本，如下所示 ```json { "scripts": { "dev": "electron ." } } ``` 在項目根目錄，運行腳本命令就可以啟動 electron 了，會彈出一個窗口 ``` npm run dev ``` #### 4. 加載網頁或文件 --- ```javascript const { BrowserWindow, app } = require('electron'); const path = require('path'); // 應用啟動后創建窗口 app.whenReady().then(() => { const mainWindow = new BrowserWindow({ // 窗口大小 width: 300, height: 300, // 窗口置頂 alwaysOnTop: true, // 窗口位置 x: 1500, y: 100 }) // 加載網頁 // mainWindow.loadURL('http://www.g-eproperties.com') // 加載文件 mainWindow.loadFile(path.resolve(__dirname, 'index.html')) }) ``` #### 5. 主進程和渲染進程 --- 在 electron 應用程序中，主進程就是從 package.json 文件中的 main 腳本開始的進程。主進程中運行的 JS 可以調用操作系統的本地功能，因為它可以訪問 nodejs 標準庫。 主進程主要負責創建和控制瀏覽器窗口，管理應用程序的生命周期，以及運行應用程序的主要功能。主進程可以創建多個渲染進程，每一個渲染進程都是一個新的瀏覽器窗口或 web 頁面 根目錄下的 index.js 就是主進程文件，主進程中打印的結果會輸出到終端中 ```javascript console.log('hello electron'); ```  渲染進程負責運行用戶界面的 JS。每個 electron 都在其自己的渲染進程中運行 在默認情況下，渲染進程不能使用 nodejs 和 electron api，因為這可能產生安全問題 #### 6. nodemon 刷新應用 --- 在修改主進程文件后，每次都要重新執行 `npm run dev` 才會生效，如果想要修改為自動生效，可以使用 nodemon 安裝 nodemon 為運行時依賴 ``` npm install -D nodemon ``` 修改 package.json 文件，在 electron 啟動命令前面添加 `nodemon --exec` 即可 ```json { "scripts": { "dev": "nodemon --exec electron ." } } ``` 此時，當修改主進程文件 index.js 時，會自動刷新，但是它默認不監聽 html 文件的改動 在項目根目錄下創建配置文件 nodemon.json，將下面內容放入該文件就可以監聽 html 文件的修改了 ```json { "ignore": [ "dist", "node_modules" ], "colours": true, "verbose": true, "restartable": "rs", "watch": [ "*.*" ], "ext": "html,js" } ``` #### 7. 兼容 mac 系統的操作方式 --- mac 和 windows 不同，mac 的應用程序所有窗口都關閉，應用程序也不會退出 ```javascript const { BrowserWindow, app } = require('electron'); const path = require('path'); // 創建窗口 const createWindow = () => { const mainWindow = new BrowserWindow({ // 窗口大小 width: 300, height: 300, // 窗口置頂 alwaysOnTop: true, // 窗口位置 x: 1500, y: 100 }) // 加載文件 mainWindow.loadFile(path.resolve(__dirname, 'index.html')) } // 監聽應用啟動 app.whenReady().then(() => { createWindow() }) // 監聽所有窗口全部關閉 app.on('window-all-closed', () => { // 當系統不是 mac 時，退出應用程序 console.log(process.platform); if (process.platform != 'darwin') app.quit(); }) // 監聽應用激活 app.on('activate', () => { createWindow() }) ```