Question

我正在创建一个以vuejs为前端的电子应用程序。如何在与main.js分开的文件中创建所有ipcMain.on（）函数。我想要一个更简洁的代码结构。

该应用必须离线运行，因此我需要将数据存储在本地数据库中。因此，当我在前端创建对象时，将其与ipcMain一起发送到电子端。然后，Electron可以将其写入本地数据库。

我想要这样的东西：

main.js：

import { app, protocol, BrowserWindow } from "electron";
import {
  createProtocol,
  installVueDevtools
} from "vue-cli-plugin-electron-builder/lib";

require("./ipcListeners.js");

ipcListeners.js：

import { ipcMain } from "electron";

ipcMain.on("asynchronous-message", (event, arg) => {
  console.log(arg);
  event.reply("asynchronous-reply", "pong");
});

ipcMain.on("random-message", (event, arg) => {
  console.log(arg);
  event.reply("random-reply", "random");
});

这里的问题是只有第一个ipcMain.on（）函数有效，而第二个ipcMain.on（）函数不起作用

Answer 1

我不知道这对我要发布的内容有什么帮助。现在您的实现对我有用，但是如果我现在需要100个文件，但仍然有问题，我必须重复导入ipcMain，这将成为性能问题，因此我所做的工作是通过插入电子和IpcMain创建了全局对象效果很好

我的Main.js文件

    const { app, BrowserWindow } = require('electron')
const electron = require('electron');
const { ipcMain } = require('electron')
global.share= {electron,ipcMain};
function createWindow () {
  // Create the browser window.
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })
  // and load the index.html of the app.
  win.loadFile('./views/index.html')

  // Open the DevTools.
  win.webContents.openDevTools()
}


app.whenReady().then(createWindow);


// Quit when all windows are closed.
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {

  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

require('./test.js');

test.js

global.share.ipcMain.on('synchronous-message', (event, arg) => {
    console.log(arg) // prints "ping"
    event.returnValue = 'pong'
  })

这是我的html通话

const { ipcRenderer } = require('electron')
document.querySelector('.btn').addEventListener('click', () => {
    console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"
})

现在，这个程序对我非常有用，所以不再需要冗长的main.js resources

Answer 2

我在我的项目中所做的是，我根据类别将所有 IPC 排列在不同的文件夹中，并在每个文件中导出所有 IPC，如下例所示

products.js

module.exports = {
products: global.share.ipcMain.on('get-products', (event, key) => {
    getProducts()
        .then(products => {
            event.reply('get-products-response', products)
        })
        .catch(err => {
            console.log(err)
        })
})
}

然后我创建了一个新文件，该文件导入了所有导出的 IPC

index.js

const {products} = require('./api/guestIpc/products')

module.exports = {
    products
}

最后我把这个文件导入到 main.js 文件中。

main.js

const { app, BrowserWindow, ipcMain } = require('electron')

global.share = {ipcMain} #this is only for limiting the number of ipcMain calls in all the IPC files

require('./ipc/index') #require the exported index.js file

就是这样，现在所有外部 IPC 都像在 main.js 文件中一样工作

如何将ipcMain.on（）函数与main.js分开在不同的文件中

2 个答案:

products.js

index.js

main.js