前言：?參考尚硅谷視頻記錄：b站尚硅谷視頻-1小時上手electron

一、什么是electron?

是一款應用廣泛的、跨平臺的、桌面應用開發框架。

• 應用廣泛：很多桌面應用都是這個框架寫的，例如騰訊qq、百度云
• 跨平臺：跨window、mac、Linux這三大系統

二、electron的進程

main.js主進程使用Node api跟各個頁面之間雙向通信（ipc），同時使用native api實現操作的兼容

比如：主進程發出執行a，要想window、mac、linux都能聽懂，就需要native api翻譯一下

三、搭建工程

可參考：快速入門 | Electron

1、安裝node

在Node官網下載安裝即可，最好是最新的版本

2、初始化項目

package.json配置文件里會出現下圖，注意：作者和描述是必填的

3、安裝electron

npm install --save-dev electron
//或者
npm install electron -D

如果安裝報錯，可以試試用淘寶鏡像來安

cnpm i electron

4、打印hello world

在package.json里添加運行指令

新建一個入口文件main.js，就可以測試下能否正常打印了

四、案例實戰

可參考BrowserWindow | Electron

1、遠程頁面窗口

寫一個可以展示遠程頁面的窗口

2、本地頁面

新建個本地頁面，然后在main.js里掛上去就好

const { app, BrowserWindow } = require('electron');const createWindow = () => {const win = new BrowserWindow({width: 800,//窗口寬度height: 600,//窗口高度autoHideMenuBar: true,//隱藏默認菜單欄})win.loadFile('./pages/index/index.html')
}app.on('ready', () => {createWindow()
})

備注：關于CSP的詳細說明：MDN內容安全策略詳解?、Electron安全策略規范

//可以解決安全策略警告問題，記得在html里加上
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

3、多系統兼容窗口生命周期

因為關閉窗口操作，對于不同系統有不同的規則。

• window和Linux，關閉所有窗口時會退出應用
• macOS 應用通常即使在沒有打開任何窗口的情況下也繼續運行，并且在沒有窗口可用的情況下激活應用時會打開新的窗口

所以需要配置以下代碼

//window && linux
//若果是非macOs系統，頁面全部關閉時就退出應用
app.on('window-all-closed', () => {if (process.platform !== 'darwin') app.quit()
})

//macOs
//這里的whenReady寫法和前面的on ready一樣
app.whenReady().then(() => {createWindow()//當應用啟動，且沒有頁面時，則打開一個新頁面app.on('activate', () => {if (BrowserWindow.getAllWindows().length === 0) createWindow()})
})

4、熱更新nodemon

每次保存后就自動熱更新頁面，配置如下：

//安裝nodemon
cnpm i nodemon -D

//重寫package.json里的start"scripts": {"start": "nodemon --exec electron ."},

添加一個nodemon文件

自此就可以利用nodemon，完成保存時刷新頁面啦。

5、認識preload

什么是preload？還記得前面的electron進程圖嗎？preload（預加載文件）也就是主進程node和渲染進程（html+js+css頁面）之間雙向通信的那個ipc，是二者之間的橋梁

什么情況需要使用preload呢？

例如，render里需要訪問process時，process是node主進程的參數，render渲染進程無法直接訪問，就需要通過preload傳遞

主進程和預加載腳本通過webPreferences關聯，而預加載進程通過設置類似全局參數把內容傳給了渲染進程

注意：主進程和渲染進程是一對多的關系，主進程、預加載腳本、渲染進程依次加載

五、進程通信

1、渲染進程 => 主進程

借案例來理解，要求從渲染進程頁面輸入文字后，點擊存入按鈕，輸入內容通過主進程存儲到D盤

效果如下

添加代碼如下

2、主進程 <=> 渲染進程

例如，渲染進程告知主進程要讀取的指令，主進程將信息傳遞給渲染進程，實現了雙向的溝通

效果如下：

參考上面的添加代碼

render.js

const btn3 = document.getElementById("btn3")btn3.onclick = async() => {//獲取主進程傳過來的文件信息const res = await myAPI.readFile()alert(res)
}

main.js

//讀取文件
function readFile() {const res = fs.readFileSync("D:/hello.txt").toString()return res
}//關鍵字關聯preload讀取操作
ipcMain.handle('file-read', readFile)

preload.js

readFile() {return ipcRenderer.invoke('file-read')}

3、主進程 => 渲染進程

類似于1

主進程，用win.webContens.send('信道','數據')發出數據

渲染進程，用ipcRender.on('信道','回調') 接收數據

//main.js
function createWindow(){win.webContents.sernd('message','你好嗎？')
}//preload.js
contextBrige.exposeInMainWorld('myApi',{getMessage:(callback) => {return ipcRender.on('message',callback);}
})

六、打包

方法一

失敗了，視頻中使用electron-builder打包

1、安裝electron-builder

cnpm install electron-builder -D

2、添加builder配置

3、運行命令打包

npm run build

然后就打包失敗了，原因是因為github訪問失敗

方法二

參考electron官網：打包您的應用程序 | Electron

npm install --save-dev @electron-forge/cli

npx electron-forge import

npm run make

打包后的文件,在根項目下的out文件夾里

七、框架

electron已經集成了框架，比如electron-vite，開箱即用支持react和vue，很方便

可以多多看下，并運用