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()
    })
})

• 结果