H5 向 electrol 发送 消息

需求背景：项目技术栈是 Electrol 内嵌了H5页面，实现了web端和桌面端共用一套代码

需求点：左侧菜单有一个 截屏和录屏的功能按钮。要求这俩按钮在web端点击之后提示下载桌面端。而在桌面端点击这俩按钮的时候才真正的去执行录屏和截屏操作（截屏和录屏的操作是用了node的一些能力）

实现方式以及思路： 先是问了豆包这种通信方式能否实现，豆包给的答案是肯定的

具体实现： 1、定义一个 preload.js ,在创建窗口的时候配置 preload.js 的路径

   preload.js
   // preload.js
    const { contextBridge, ipcRenderer } = require("electron");
    // 这步我理解是向windos 里面添加一个 可调用的 api
    contextBridge.exposeInMainWorld("electronAPI", {
      triggerElectronAction: (data) => {
        ipcRenderer.send("h5-button-click", data);
      },
    });

    main.js 
    
    cWindow = new BrowserWindow({
        width: 1000,
        height: 560,
        webPreferences: {
            nodeIntegration: true, 
            sandbox: false,
            contextIsolation: true, // 这个必须设置为true
            webSecurity: false, 
            preload: path.join(__dirname, "../../src", "main", "preload.js"), // 预加载脚本路径
        },
    })
    // 监听H5发送的事件
    ipcMain.on("h5-button-click", (event, data) => {
        console.log("info from web", data);
        // do something
    });
    
   
        

在web的页面中
  const handleRecord = (type) => {
      if (window.electronAPI) 
       // 表明是在electrol 环境中 type 是向桌面端发送的参数
        window.electronAPI.triggerElectronAction({
          type,
        });
      } else {
        // 在浏览器环境中
      }
  };