1 主进程与渲染进程 预加载脚本
主进程
每个 Electron 应用都有一个单一的主进程，作为应用程序的入口点。 主进程在 Node.js 环境中运行，这意味着它具有 require 模块和使用所有 Node.js API 的能力
渲染器进程
每个 Electron 应用都会为每个打开的 BrowserWindow ( 与每个网页嵌入 ) 生成一个单独的渲染器进程。 洽如其名，渲染器负责 渲染 网页内容。 所以实际上，运行于渲染器进程中的代码是须遵照网页标准的 (至少就目前使用的 Chromium 而言是如此) 。
渲染进程本不参与node.js API使用，但有一些代码会由主进程暴露给渲染进程，用以在渲染进程环境中运行，优先于网页内容加载，即preload.js
开启渲染进程使用preload.js
方法1：关闭上下文隔离
function createMainWindow () {
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false, // 关闭上下文隔离 渲染进程可访问node.js API
preload: `${__dirname}/preload.js` //${__dirname} 代表当前文件所在目录
}
});
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
实现功能：通过页面输入和点击，渲染进程向主进程发送请求，更改window属性，如应用标题名
总的步骤可区分为：
设计步骤：设计请求的触发——设计请求——设计响应
触发步骤：触发请求——发送请求——接受请求并响应
设计请求的触发
绘制输入框及发送按钮-index.html
<input type="text" id="title">
<button id="btn">修改标题</button>
绑定事件
<script>
const title = document.getElementById('title');
const btn = document.getElementById('btn');
// 绑定事件
btn.addEventListener('click', () => {
const value = title.value;
window.electronApi.setTitle(value); // 向主进程发送消息
});
</script>
设计请求
预加载：渲染进程只负责渲染画面，如要更改元素，需向其暴露操作接口
暴露接口通过预加载实现。
预加载需求分析-preload.js
- 发送消息的模块
ipcRenderer - 发送消息的实现
const { contextBridge, ipcRenderer } = require('electron'); //ipcRenderer 实现渲染进程与主进程之间的异步通信
contextBridge.exposeInMainWorld('electronApi', { //暴露接口名与其实现 接口名就是对象名 实现就是对象的方法或子成员
setTitle: (title) => {
ipcRenderer.send('set-title', title); //通过ipcRenderer向主进程发送事件通知(事件/消息名称， 消息内容)
},
});
设计监听与响应
主进程的请求处理-main.js
主进程监听渲染进程发送的消息，并做出响应
ipcMain.on('set-title', (event, title) => {
BrowserWindow.getFocusedWindow().setTitle(title); //获取当前焦点窗口并设置标题 event用以消息反馈
});
监听消息类型为“set-title”的消息，并做出响应
最终呈现
2-2
双向通信
2-1
3 DarkMode
4 应用菜单
5 托盘菜单
6 Notification 通知
主进程
渲染进程
