5

我正在创建一个以 vuejs 作为前端的电子应用程序。如何在与 main.js 不同的文件中创建所有 ipcMain.on() 函数。我想要一个更干净的代码结构。

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

我想要这样的东西：

主.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() 函数有效，但第二个，... 没有

4

2 回答 2

2

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

产品.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 文件中一样工作

于 2021-02-22T08:38:28.997 回答
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');

测试.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 资源

于 2020-04-24T12:58:46.107 回答