快捷導(dǎo)航

Electron主進(jìn)程(Main?Process)與渲染進(jìn)程(Renderer?Process)通信詳解

更新時(shí)間：2024年03月11日 14:22:50 作者：明天也要努力

這篇文章主要介紹了Electron主進(jìn)程(Main?Process)與渲染進(jìn)程(Renderer?Process)通信,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

渲染進(jìn)程向主進(jìn)程通信

修改 html 文件內(nèi)容

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解決控制臺(tái)警告問題 -->
  <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-inline';">
  <title>electron</title>
</head>
<body>
  <input type="text" id="name">
  <button id="btn">send</button>
  <script src="./renderer/app.js"></script>
</body>
</html>

根目錄下新增 renderer 文件夾

在 renderer 文件夾下新増 app.js 文件，此處的文件表示渲染進(jìn)程的 js 文件，可以操作渲染進(jìn)程（瀏覽器）中的dom。

const button = document.getElementById('btn');

button.addEventListener('click',() => {
  // 此處的electronAPI即為預(yù)加載中傳遞的命名空間，sendMainInfo為傳遞過來的回調(diào)函數(shù)
  const name = document.getElementById('name').value;
  electronAPI.sendMainInfo(name);
})

在根目錄下新増 preload.js 文件

// 此文件為預(yù)加載文件，需在 main.js 文件中配置
const { ipcRenderer,contextBridge } = require('electron');

/*
* 搭建主進(jìn)程和渲染進(jìn)程的橋梁
*/ 
// render-info代表主進(jìn)程可以監(jiān)聽的回調(diào)函數(shù)
const sendMainInfo = async (val) => {
  ipcRenderer.invoke('render-info',val);
}
// electronAPI 代表向渲染進(jìn)程傳遞的對(duì)象命名，sendMainInfo表示向渲染進(jìn)程傳遞一個(gè)回調(diào)函數(shù)
contextBridge.exposeInMainWorld('electronAPI',{
  platform: process.platform,
  sendMainInfo,
});

修改主進(jìn)程（main.js）文件

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 1000,
    webPreferences:{
      preload: path.resolve(__dirname,'./preload.js') // 渲染進(jìn)程預(yù)加載
    }
  });
  // 加載靜態(tài)資源
  win.loadFile('index.html');
  // 打開開發(fā)者工具
  win.webContents.openDevTools();
};

// 主進(jìn)程監(jiān)聽渲染進(jìn)程傳遞過來的回調(diào)函數(shù)
ipcMain.handle('render-info',(event,args) => {
  console.log(args)
})


// app.whenReady 表示主進(jìn)程加載完成，返回 promise 
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    // 此處解決mac系統(tǒng)關(guān)閉app后，但程序塢中還存在圖標(biāo)，再次點(diǎn)擊可以重新創(chuàng)建進(jìn)程
    if(BrowserWindow.getAllWindows.length === 0){
      createWindow();
    } 
  })
});


// 關(guān)閉所有窗口
app.on('window-all-closed', () => {
  // electron 運(yùn)行在三個(gè)環(huán)境（win32 Windows系統(tǒng)、linux Linux系統(tǒng)、 darwin Mac系統(tǒng)）
  // 此處解決的是非mac系統(tǒng)，程序退出進(jìn)程 (Mac系統(tǒng)關(guān)閉app會(huì)保留在程序塢中)
  if(process.platform !== 'darwin'){
    app.quit();
  } 
})

效果

主進(jìn)程向渲染進(jìn)程通信

修改主進(jìn)程（main.js）文件

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

const createWindow = () => {
  const win = new BrowserWindow({
    width: 1200,
    height: 1000,
    webPreferences:{
      preload: path.resolve(__dirname,'./preload.js') // 渲染進(jìn)程預(yù)加載
    }
  });
  // 加載靜態(tài)資源
  win.loadFile('index.html');
  // 打開開發(fā)者工具
  win.webContents.openDevTools();
};


// 主進(jìn)程監(jiān)聽渲染進(jìn)程傳遞過來的回調(diào)函數(shù)
ipcMain.handle('main-info',async (event,args) => {
  return await getInfo();
})

// mock 一個(gè)接口
function getInfo() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('來自主進(jìn)程的數(shù)據(jù)');
    }, 500)
  })
}

// app.whenReady 表示主進(jìn)程加載完成，返回 promise 
app.whenReady().then(() => {
  createWindow();
  app.on('activate', () => {
    // 此處解決mac系統(tǒng)關(guān)閉app后，但程序塢中還存在圖標(biāo)，再次點(diǎn)擊可以重新創(chuàng)建進(jìn)程
    if(BrowserWindow.getAllWindows.length === 0){
      createWindow();
    } 
  })
});


// 關(guān)閉所有窗口
app.on('window-all-closed', () => {
  // electron 運(yùn)行在三個(gè)環(huán)境（win32 Windows系統(tǒng)、linux Linux系統(tǒng)、 darwin Mac系統(tǒng)）
  // 此處解決的是非mac系統(tǒng)，程序退出進(jìn)程 (Mac系統(tǒng)關(guān)閉app會(huì)保留在程序塢中)
  if(process.platform !== 'darwin'){
    app.quit();
  } 
})

修改 preload.js 文件

// 此文件為預(yù)加載文件，需在 main.js 文件中配置
const { ipcRenderer,contextBridge } = require('electron');

/*
* 搭建主進(jìn)程和渲染進(jìn)程的橋梁
*/ 
const mainToRender = async (res) => {
  const resData = await ipcRenderer.invoke('main-info',res);
  return resData;
};


// electronAPI 代表向渲染進(jìn)程傳遞的對(duì)象命名
contextBridge.exposeInMainWorld('electronAPI',{
  platform: process.platform,
  mainToRender,
});

修改 renderer/app.js 文件

const button = document.getElementById('btn');

button.addEventListener('click',async () => {
  // 此處的electronAPI即為預(yù)加載中傳遞的命名空間，mainToRender為傳遞過來的回調(diào)函數(shù)
  let name = document.getElementById('name');
  const res = await electronAPI.mainToRender();
  name.value = res;
})