快捷導(dǎo)航

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

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

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

渲染進程向主進程通信

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 解決控制臺警告問題 -->
  <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 文件，此處的文件表示渲染進程的 js 文件，可以操作渲染進程（瀏覽器）中的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');

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

修改主進程（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') // 渲染進程預(yù)加載
    }
  });
  // 加載靜態(tài)資源
  win.loadFile('index.html');
  // 打開開發(fā)者工具
  win.webContents.openDevTools();
};

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


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


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

效果

主進程向渲染進程通信

修改主進程（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') // 渲染進程預(yù)加載
    }
  });
  // 加載靜態(tài)資源
  win.loadFile('index.html');
  // 打開開發(fā)者工具
  win.webContents.openDevTools();
};


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

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

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


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

修改 preload.js 文件

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

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


// electronAPI 代表向渲染進程傳遞的對象命名
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;
})