electron 如何将ipcMain.on()函数从main.js中分离出来

f45qwnt8  于 2023-04-27  发布在  Electron
关注(0)|答案(3)|浏览(268)

我正在用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()函数可以工作,但是第二个,...不能

kx7yvsdv

kx7yvsdv1#

我在我的项目中所做的是,我安排在不同的文件夹中的所有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文件中一样工作

juzqafwq

juzqafwq2#

我不知道这会有任何帮助,我将发布我所做的。现在你的实现为我工作,但我仍然有问题,如果我需要100个文件,现在在所有这些要求我必须反复导入ipcMain,所以这将是一个性能问题,所以我所做的是通过插入electon和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

p5fdfcr1

p5fdfcr13#

你也可以通过简单地导出一个函数来做到这一点。我使用的是基于模块的类型脚本。
我的dbCalls.ts

import { ipcMain } from 'electron'

export function DbCalls() {
  ipcMain.handle('setDB', (event, args) => {
    console.log("setting data in DB")
  })

  ipcMain.handle('getDB', (event, args) => {
    console.log("getting data from DB")
  })

  // more ipc calls here
}

main.ts中导入

import { app, BrowserWindow } from 'electron'
import path from 'path'
import {dbCalls} from "./dbCalls"

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js')
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
      createWindow()
    }
  })
})

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

dbCalls(); // this function set all the ipc calls in main process

相关问题