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