electron的进程通信,单向通信,子进程到主进程

pikaqiu420

已于 2024-09-02 18:13:25 修改

阅读量25

点赞数

文章标签： electron javascript 前端

于 2024-09-02 15:11:00 首次发布

本文链接：https://blog.csdn.net/pikaqiu420/article/details/141819544

版权

示例一:修改标题

1.在入口文件,main.js中配置预加载文件的路径,并添加对事件 set-title 的监听用来处理该事件

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

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            preload: path.join(__dirname, 'preload.js')//配置预加载文件的地址
        }
    })
    win.loadFile('src/index.html') //首页
}
app.on('ready',createWindow)

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

ipcMain.on("set-title",(event,title)=>{
  // 获取当前正在使用的窗口,修改标题
  // console.log(event,'2222222222')
  BrowserWindow.getFocusedWindow().setTitle(title)

})

2.在src下创建preload.js文件,并暴露exposeInMainWorld函数

const {contextBridge,ipcRenderer} = require('electron');

contextBridge.exposeInMainWorld('electronApi',{
  setTitle:(title)=>{
    console.log('进去了',title)
    ipcRenderer.send('set-title',title);
  },
  appName:'electron_my'
})

3.在首页中添加点击事件,将输入框中的文字设置为应用的标题

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>hello</h1>
  <input type="text" id="text">
  <button id="btn">修改标题</button>
  <script>
    const title = document.getElementById('text')
    const btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
      console.log('11111')
      const value = title.value
      console.log(value,'11111')
      window.electronApi.setTitle(value)
    })


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

示例二:窗口操作

1.在入口文件main.js中修改窗口创建时的配置,将系统的边框去掉,写一个自己的样式,

给按钮绑定点击事件,通过预加载文件暴露出来的send事件向主进程通信,传递参数事件名和事件行为类型:window:state和action

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入外联样式文件 -->
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <header>
    <h1>窗口标题</h1>
    <nav>
      <button class="btn-window" data-action="minimize">最小化</button>
      <button class="btn-window" data-action="maximize">最大化</button>
      <button class="btn-window" data-action="restore">还原</button>
      <button class="btn-window" data-action="close">关闭</button>
    </nav>
  </header>
  <input type="text" id="text">
  <button id="btn">修改标题</button>
  <script>
    // 更改标题
    const title = document.getElementById('text')
    const btn = document.getElementById('btn')
    btn.addEventListener('click', () => {
      console.log('11111')
      const value = title.value
      console.log(value,'11111')
      window.electronApi.setTitle(value)
    })
    // 按钮操作
    const btns = document.querySelectorAll('.btn-window')
    btns.forEach(btn => {
      btn.addEventListener('click', () => {
        const action = btn.getAttribute('data-action');
        console.log(action,'查看当前点击的按钮')
        window.electronApi.send("window:state",action)
      })
    })
  </script>
</body>
</html>

样式文件 index.css

*{
  margin: 0;
  padding: 0;
}

header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #333;
  color: #fff;
  padding: 10px;
  /* 父盒子可以拖拽 */
  -webkit-app-region: drag;  
}

header nav{
  /* 子盒子不可以拖拽 */
  -webkit-app-region: no-drag;
}

在预加载文件中暴露发送 send 事件

const {contextBridge,ipcRenderer} = require('electron');

contextBridge.exposeInMainWorld('electronApi',{
  setTitle:(title)=>{
    console.log('进去了',title)
    ipcRenderer.send('set-title',title);
  },
  appName:'electron_my',
  // 窗口的操作
  send:(channel,data)=>{
    ipcRenderer.send(channel,data);
  }
})

在main.js中添加window:state事件的监听处理通过事件行为类型做不同的操作

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

function createWindow () {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        frame:false,//隐藏系统边框
        webPreferences: {
            nodeIntegration: true,
            preload: path.join(__dirname, 'preload.js'),
        }
    })
    win.loadFile('src/index.html')
}
app.on('ready',createWindow)

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

ipcMain.on("set-title",(event,title)=>{
  // 获取当前正在使用的窗口,修改标题
  // console.log(event,'2222222222')
  BrowserWindow.getFocusedWindow().setTitle(title)

})
//添加监听 window:state 事件的处理
ipcMain.on("window:state",(event,action)=>{
    // 获取当前正在使用的窗口,
    const window = BrowserWindow.getFocusedWindow();
    switch(action){
        case 'minimize':
            window.minimize();
            break;
        case 'maximize':
            // 如果最大化和最小化是一个按钮时
            // window.isMaximized()? window.unmaximize() : window.maximize();
            window.maximize();
            break;
        case 'restore':
            window.unmaximize();
            break;
        case 'close':
            window.close();
    }

})

pikaqiu420

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
electron的进程通信,单向通信,子进程到主进程

1.在入口文件,main.js中配置预加载文件的路径,并添加对事件 set-title 的监听用来处理该事件。2.在src下创建preload.js文件,并暴露exposeInMainWorld函数。3.在首页中添加点击事件,将输入框中的文字设置为应用的标题。
复制链接

扫一扫