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

2024-01-02 15:12:26

主进程和预加载脚本通信

  • 主进程 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()
    })
})
  • 结果
    在这里插入图片描述

文章来源:https://blog.csdn.net/weixin_45799605/article/details/135336217
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。