1 主進程與渲染進程 預(yù)加載腳本
主進程
每個 Electron 應(yīng)用都有一個單一的主進程慕趴，作為應(yīng)用程序的入口點厌丑。 主進程在 Node.js 環(huán)境中運行，這意味著它具有 require 模塊和使用所有 Node.js API 的能力
渲染器進程
每個 Electron 應(yīng)用都會為每個打開的 BrowserWindow ( 與每個網(wǎng)頁嵌入 ) 生成一個單獨的渲染器進程。 洽如其名漾唉，渲染器負責(zé) 渲染 網(wǎng)頁內(nèi)容。 所以實際上堰塌，運行于渲染器進程中的代碼是須遵照網(wǎng)頁標(biāo)準(zhǔn)的 (至少就目前使用的 Chromium 而言是如此) 赵刑。
渲染進程本不參與node.js API使用，但有一些代碼會由主進程暴露給渲染進程场刑，用以在渲染進程環(huán)境中運行般此，優(yōu)先于網(wǎng)頁內(nèi)容加載，即preload.js
開啟渲染進程使用preload.js
方法1：關(guān)閉上下文隔離
function createMainWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false, // 關(guān)閉上下文隔離 渲染進程可訪問node.js API
preload: `${__dirname}/preload.js` //${__dirname} 代表當(dāng)前文件所在目錄
}
});
mainWindow.loadFile('src/index.html');
}
方法2：使用contexBridge模塊 在preload.js文件中更改
const { contextBridge } = require('electron');
contextBridge.exposeInMainWorld("BASE_URL", "http://api.xxx.com"); //(名稱牵现，值)
contextBridge.exposeInMainWorld("HttpUtil", {
get: (url, params) => {
console.info("axios", url, params);
},
post: (url, data) => {
console.info("axios-post", url, data);
}
});
2 單向通信
2-1
實現(xiàn)功能：通過頁面輸入和點擊铐懊，渲染進程向主進程發(fā)送請求，更改window屬性瞎疼，如應(yīng)用標(biāo)題名
總的步驟可區(qū)分為：
設(shè)計步驟：設(shè)計請求的觸發(fā)——設(shè)計請求——設(shè)計響應(yīng)
觸發(fā)步驟：觸發(fā)請求——發(fā)送請求——接受請求并響應(yīng)
設(shè)計請求的觸發(fā)
繪制輸入框及發(fā)送按鈕-index.html
<input type="text" id="title">
<button id="btn">修改標(biāo)題</button>
綁定事件
<script>
const title = document.getElementById('title');
const btn = document.getElementById('btn');
// 綁定事件
btn.addEventListener('click', () => {
const value = title.value;
window.electronApi.setTitle(value); // 向主進程發(fā)送消息
});
</script>
設(shè)計請求
預(yù)加載：渲染進程只負責(zé)渲染畫面科乎，如要更改元素，需向其暴露操作接口
暴露接口通過預(yù)加載實現(xiàn)丑慎。
預(yù)加載需求分析-preload.js
- 發(fā)送消息的模塊
ipcRenderer - 發(fā)送消息的實現(xiàn)
const { contextBridge, ipcRenderer } = require('electron'); //ipcRenderer 實現(xiàn)渲染進程與主進程之間的異步通信
contextBridge.exposeInMainWorld('electronApi', { //暴露接口名與其實現(xiàn) 接口名就是對象名 實現(xiàn)就是對象的方法或子成員
setTitle: (title) => {
ipcRenderer.send('set-title', title); //通過ipcRenderer向主進程發(fā)送事件通知(事件/消息名稱喜喂， 消息內(nèi)容)
},
});
設(shè)計監(jiān)聽與響應(yīng)
主進程的請求處理-main.js
主進程監(jiān)聽渲染進程發(fā)送的消息瓤摧，并做出響應(yīng)
ipcMain.on('set-title', (event, title) => {
BrowserWindow.getFocusedWindow().setTitle(title); //獲取當(dāng)前焦點窗口并設(shè)置標(biāo)題 event用以消息反饋
});
監(jiān)聽消息類型為“set-title”的消息，并做出響應(yīng)
最終呈現(xiàn)
2-2
雙向通信
2-1
3 DarkMode
4 應(yīng)用菜單
5 托盤菜單
6 Notification 通知
主進程
渲染進程
7 快捷鍵
