前言：

本文主要介紹electron渲染進(jìn)程和主進(jìn)程間的通信，以及在渲染進(jìn)程和主進(jìn)程中常用的配置項(xiàng)。

一、配置內(nèi)容

1.進(jìn)程間的通信

渲染進(jìn)程和主進(jìn)程間的通信主要通過ipcRenderer和ipcMain這兩個模塊實(shí)現(xiàn)的，其中ipcRenderer是在渲染進(jìn)程中使用，ipcMain在主進(jìn)程中使用。

其中，渲染進(jìn)程使用ipcRenderer有兩種方式

第一種方式引入ipcRenderer

這種方式主要是通過Electron窗口的preload方法實(shí)現(xiàn)的，以下是實(shí)現(xiàn)步驟

首先我們創(chuàng)建一個preload.js文件，把文件放入到public文件中

// preload.js
window.ipcRenderer = require('electron').ipcRenderer;

之后在主進(jìn)程中引入：

import { BrowserWindow, ipcMain } from 'electron'
let win = new BrowserWindow({
    width: 800, 
    height: 600,
    webPreferences: {
      contextIsolation: false,
      // eslint-disable-next-line no-undef
      preload: __static + '/preload.js'
    }
})
// 順便這里放一個主進(jìn)程的監(jiān)聽
ipcMain.on('pong', (e, args) => {
    console.log('這里是主進(jìn)程pong', args)
    e.sender.send('ping', '你好 我是主進(jìn)程')
})

這樣我們就可以再渲染進(jìn)程直接使用window.ipcRenderer，去監(jiān)聽或發(fā)送事件了。

// App.vue

// 渲染進(jìn)程的監(jiān)聽
window.ipcRenderer.on('pang', (e, arg) => {
  console.log('渲染進(jìn)程===我收到啦', arg)
})
// 渲染進(jìn)程發(fā)送事件===這個可以放到一個點(diǎn)擊事件里面去觸發(fā)
window.ipcRenderer.send('ping', '你好呀，我是渲染進(jìn)程')

實(shí)驗(yàn)結(jié)果如下，這里注意主進(jìn)程的打印是在終端里面輸出的：

第二種方式引入ipcRenderer

首先我們需要先安裝一個插件，這是由于在webpack5中移除了nodejs核心模塊的polyfill自動引入，所以需要手動引入，這里我的腳手架version是5.0.8

npm install node-polyfill-webpack-plugin
// or
yarn add node-polyfill-webpack-plugin

之后在vue.config.js中引入

// vue.config.js

const NodePolyfillPlugin = require('node-polyfill-webpack-plugin')

module.exports = defineConfig({
  ...
  configureWebpack: {
    plugins: [new NodePolyfillPlugin()],
  }
})

在主進(jìn)程文件中，創(chuàng)建窗口時這樣設(shè)置

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

最后我們在渲染進(jìn)程的入口文件main.js引入ipcRenderer

// main.js

window.ipcRenderer = window.require('electron').ipcRenderer

實(shí)驗(yàn)方式和結(jié)果同方法一相同。

這里再給大家說，要使用window.require('electron').ipcRenderer這種方式。

是因?yàn)橹苯?code>window.ipcRenderer = require('electron').ipcRenderer這樣引入會報錯，如下：

出現(xiàn)這個錯誤的原因主要是因?yàn)椋簄odejs運(yùn)行時的require與編譯時webpack的require是不同的。默認(rèn)情況下，window是全局的，然而在webpack編譯時會忽略window。 具體情況可以點(diǎn)擊查看

以上我們就可以實(shí)現(xiàn)渲染進(jìn)程和主進(jìn)程的相互通信。

2.渲染進(jìn)程常用配置

接下來我們就統(tǒng)一引入下在渲染進(jìn)程中常用的配置，其中ipcRenderer用于渲染進(jìn)程與主進(jìn)程通信或渲染進(jìn)程與渲染進(jìn)程間通信； $remote用于獲取當(dāng)前主窗口的一些信息；$shell用于將連接用默認(rèn)瀏覽器打開或者啟動默認(rèn)應(yīng)用之類的。

// 判斷是否是electron環(huán)境
window.$isElectron = window?.process?.versions.electron !== undefined
// 判斷是否是macOS系統(tǒng)
window.$isMac = /macintosh|mac os x/i.test(navigator.userAgent)
// 將渲染進(jìn)程通信實(shí)例掛載到window上
window.ipcRenderer = window.require('electron').ipcRenderer
// `remote`模塊為渲染進(jìn)程（web頁面）和主進(jìn)程通信（IPC）提供了一種簡單方法。
window.$remote = window.require('electron').remote
// 將使用默認(rèn)應(yīng)用程序管理文件和 url實(shí)例掛載到window上
window.$shell = window.require('electron').shell

這些配置可以用上面兩種任意方式引入渲染進(jìn)程都可以。

這里要注意 remote 模塊在 Electron 12 廢棄，并將在 Electron 14 被移除. 由@electronic/remote 模塊替代。

當(dāng)前我們的版本是electron13，所以我們還可以正常使用remote 模塊就行。

如果使用remote 模塊，我們需要在創(chuàng)建窗口實(shí)例中加入一項(xiàng)配置enableRemoteModule: true ，

如下所示：

const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false,
      enableRemoteModule: true 
    }
  })

以下附上關(guān)于@electronic/remote的官網(wǎng)講解的注意事項(xiàng)

Note:  Since this is requiring a module through npm rather than a built-in module, if you're using remote from a sandboxed process, you'll need to configure your bundler appropriately to package the code of @electron/remote in the preload script. Of course, using @electron/remote makes the sandbox much less effective.

Note:  In electron >= 14.0.0, you must use the new enable API to enable the remote module for each desired WebContents separately: require("@electron/remote/main").enable(webContents).

In electron < 14.0.0, @electron/remote respects the enableRemoteModule WebPreferences value. You must pass { webPreferences: { enableRemoteModule: true } } to the constructor of BrowserWindows that should be granted permission to use @electron/remote.

這里給大家展示下關(guān)于remote和shell的常用方法，如下：

// remote --- 獲取當(dāng)前窗口實(shí)例，之后可以調(diào)用窗口的放大縮小關(guān)閉等方法
window.$remote.getCurrentWindow()
// shell --- 用默認(rèn)瀏覽器打開這個鏈接
window.shell.openExternal(url)

3.將ipcMain封裝到一個js中統(tǒng)一處理

創(chuàng)建一個IpcMainEvent.js文件，之后再background中引入，這樣便于管理

import { ipcMain } from 'electron'
export const IpcMainEvent = (win) => { 
  // 監(jiān)聽登錄成功
  ipcMain.on('login', (event, arg) => {
       // .... 
  })
}

import { IpcMainEvent } from './IpcMainEvent'
// win為窗口實(shí)例
IpcMainEvent(win)

三、總結(jié)

以上關(guān)于electron+vue的項(xiàng)目的一些基礎(chǔ)配置我們就算是完成了。接下來就可以搭建項(xiàng)目的業(yè)務(wù)部分了。后續(xù)會繼續(xù)給大家介紹關(guān)于electron窗口相關(guān)的配置等，完善桌面應(yīng)用。

到此這篇關(guān)于vue與electron實(shí)現(xiàn)進(jìn)程間的通信詳情的文章就介紹到這了,更多相關(guān)vue electron通信內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論