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文件.然后调用他即可实现了
标签:vue,const,electron,js,Electron,false,日记 From: https://www.cnblogs.com/mrkr/p/18392594