electron之进程间通信

Electron进程间通信

使用electron编写程序时经常遇到下面这种场景:

当用户点击一个按钮时,需要将页面输入的信息保存到本地电脑上;

或者是点击菜单时,需要页面窗口做出响应。

用户点击的按钮和窗口展示的内容是运行在渲染进程中,而保存的操作和点击菜单是运行在主进程中的,渲染进程和主进程无法直接通信,

这是就需要使用到进程间通信(IPC)

为了实现这种通信,Electron提供了 ipcMainipcRenderer 模块。

渲染进程到主进程的通信

下面是一个简单的例子,介绍在页面输入文本信息,然后点击按钮将文本信息保存到本地电脑,然后点击查询,读取本地电脑文件并将读取的文本展示出来。

main.js

javascript 复制代码
const { app, BrowserWindow, ipcMain } = require('electron')
const {join} = require("path");
const fs = require("fs");

// 应用创建窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: join(__dirname, 'preload.js')
        }
    })
    win.loadFile('index.html')
    win.webContents.openDevTools();
}
app.whenReady().then(() => {
    // 处理保存文本的事件
    ipcMain.handle('save-text', async (event, text) => {
        const filePath = `./output.txt`;
        fs.writeFileSync(filePath, text);
    });

    // 处理查询文本的事件
    ipcMain.handle('query-text', async (event) => {
        const filePath = `./output.txt`;
        return fs.readFileSync(filePath, {encoding: 'utf-8'});
    });
    createWindow()
})

preload.js

js 复制代码
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
    saveText: (text) => ipcRenderer.invoke('save-text', text),
    queryText: () => ipcRenderer.invoke('query-text'),
})

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <label>
      输入文本信息:
      <input id="input-name" type="text">
  </label>
  <input id="save" type="button" value="保存">
  <div>
      <input id="query" type="button" value="读取文本信息">
      <div id="text"></div>
  </div>

<script>
    const saveButton = document.getElementById('save')
    saveButton.addEventListener('click', () => {
        const inputName = document.getElementById('input-name')
        window.myAPI.saveText(inputName.value)
    })

    const queryButton = document.getElementById('query')
    queryButton.addEventListener('click', async () => {
        const text = document.getElementById('text')
        text.innerHTML = await window.myAPI.queryText()
    })

</script>
</body>
</html>

运行结果如下:

输入hello world!,点击保存,然后点击读取按钮,就会把保存的文件内容展示出来。

这个是渲染进程到主进程的通信,下面介绍一下主进程到渲染进程的通信。

主进程到渲染进程的通信

我们在窗口添加一个设置菜单和两个子菜单+1,-1,

点击子菜单时页面数字做出相应反馈。

main.js

js 复制代码
const { app, BrowserWindow, Menu } = require('electron')
const {join} = require("path");

// 应用创建窗口
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            preload: join(__dirname, 'preload.js')
        }
    })
    // 设置窗口菜单
    const menu = Menu.buildFromTemplate([
        {
            label: '设置',
            submenu: [
                {
                    // 点击+1按钮时触发update-counter事件并传递参数1
                    click: () => win.webContents.send('update-counter', 1),
                    label: '+1'
                },
                {
                    // 点击-1按钮时触发update-counter事件并传递参数-1
                    click: () => win.webContents.send('update-counter', -1),
                    label: '-1'
                }
            ]
        }
    ])

    Menu.setApplicationMenu(menu)
    win.loadFile('index.html')
    win.webContents.openDevTools();
}
app.whenReady().then(() => {
    createWindow()
})

preload.js

js 复制代码
const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('myAPI', {
    // 渲染进程监听update-counter事件
    handleCounter: (callback) => ipcRenderer.on('update-counter', callback)
})

index.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
  <div>count:<span id="count">0</span></div>

<script>
    const count = document.getElementById('count')
    // 传入监听update-counter事件的回调函数
    window.myAPI.handleCounter((event, value) => {
        const num = Number(count.innerText)
        count.innerText = num + value
    })

</script>
</body>
</html>

运行结果如下

以上就是electron的进程间通信,欢迎大家在评论区留言指正,相互学习

相关推荐
我要洋人死3 分钟前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试6 分钟前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana
科技探秘人14 分钟前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人15 分钟前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR20 分钟前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香22 分钟前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q24985969325 分钟前
前端预览word、excel、ppt
前端·word·excel
小华同学ai30 分钟前
wflow-web:开源啦 ,高仿钉钉、飞书、企业微信的审批流程设计器,轻松打造属于你的工作流设计器
前端·钉钉·飞书
problc35 分钟前
Flutter中文字体设置指南:打造个性化的应用体验
android·javascript·flutter
Gavin_91539 分钟前
【JavaScript】模块化开发
前端·javascript·vue.js