如何将不同文件中的 ipcMain.on() 函数与 main.js 分开答案

【问题标题】：How do I seperate ipcMain.on() functions in different file from main.js如何将不同文件中的 ipcMain.on() 函数与 main.js 分开
【发布时间】：2019-10-24 16:06:42
【问题描述】：

我正在创建一个以 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() 函数可以工作，但第二个，...没有

【问题讨论】：

如果第一个工作正常，第二个也应该工作，请检查您的代码

标签： vue.js electron ipcmain

【解决方案1】：

我在我的项目中所做的是，我根据它们的类别将所有 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 文件中一样工作了

【讨论】：

【解决方案2】：

我不知道这会对我发布我所做的事情有所帮助。现在你的实现对我有用，但如果我现在需要 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

【讨论】：