electron进程通信之预加载脚本和渲染进程对主进程通信

主进程和预加载脚本通信

• 主进程 mian,js 和预加载脚本preload.js,
• 在主进程中创建预加载脚本,

const createWindow = () => {// Create the browser window.const mainWindow = new BrowserWindow({width: 300,height: 300,// 指定预加载脚本webPreferences: {preload: path.join(__dirname, "preload.js"),nodeIntegration: true},// frame: false, //隐藏标题栏transparent: true});//每次启动弹出调试框mainWindow.webContents.toggleDevTools();// 加载页面文件mainWindow.loadFile(path.resolve(__dirname, "index.html"));// 加载外部链接// mainWindow.loadURL('')// 打开开发工具// mainWindow.webContents.openDevTools()
};
app.whenReady().then(() => {createWindow();app.on("activate", () => {// 在 macOS 系统内, 如果没有已开启的应用窗口// 点击托盘图标时通常会重新创建一个新窗口if (BrowserWindow.getAllWindows().length === 0) createWindow();});
});

• 在主进程中使用ipcMain这个api进行事件监听,假设监听 ‘ceshi’ 这个事件,下面在这个

//这段代码放到main.js最后就行
ipcMain.on('ceshi', () => {console.log('11111111111')
})

• 预加载脚本 使用ipcRenderer.send发送事件
• preload.js 全部代码

const { ipcRenderer } = require("electron");
ipcRenderer.send('ceshi')

• 结果
  

渲染进程和预加载脚本通信

• 使用contextBridge.exposeInMainWorld全局变量,预加载脚本里面的window和渲染进程里面的winodw不是通信
• 预加载代码

const { ipcRenderer, contextBridge } = require("electron");
contextBridge.exposeInMainWorld('api', {//将fn这个方法变为全局变量 可以在渲染进程这种访问fn: () => {ipcRenderer.send('ceshi')}})

• 渲染进程代码

// 在dom渲染完之后获取dom
// 为了方便测试在index页面写了一个button 通过点击事件测试通信
window.addEventListener('DOMContentLoaded', () => {const btn = document.querySelector('#btn')console.log(window)btn.addEventListener('click', () => {window.api.fn()})
})

• 结果