Electron踩坑日记-2

Electron踩坑日记-2

Electron + vue项目渲染进程如何与逻辑进程交互?

假设有这样一个需求,在页面上有一个A按钮,我现在需要点击A,然后执行某段nodejs的代码.
我们知道,在浏览器环境下是无法执行nodejs代码的,因此我们需要调用到electron给予的能力.下文,我将演示如何编写相关代码.

在main.js设置

function createWindow() {
  const win = new BrowserWindow({
    transparent: true,
    frame: false,
    titleBarStyle: "hidden",
    ......其他设置

    webPreferences: {
      nodeIntegration: true, // 允许在渲染进程中使用 Node.js
      contextIsolation: false,
      devTools: false, // 禁用开发者工具
      extensions: false, // 如果有这个选项，可以设置为 false 禁用扩展
    },
  });
}

可以看到,我将 nodeIntegration: true, 允许在渲染进程中使用 Node.js将 contextIsolation: false,允许上下文,只有先这样设置,vue项目才可以使用electron渲染进程和逻辑进程的通信的能力

然后我们只需要在main.js中注册相关的函数例如

ipcMain.handle("get-user-data-path", async () => {
  return app.getPath("userData");
});

那么我们该怎么在vue项目中调用到呢
很简单

const { ipcRenderer } = window.require("electron"); //引入ipcRenderer

const deleteFile = async (type, file) => {
  const userDataPath = await ipcRenderer.invoke ("get-user-data-path"); //触发main.js中编写的函数
};

这样,就实现了vue文件和electron的通信,只需要在

ipcMain.handle("get-user-data-path", async () => {
  return app.getPath("userData");
});

这个函数中进一步引入执行nodejs的xxx.js文件.然后调用他即可实现了