Electron使用与学习--(页面间的通信)

最新推荐文章于 2023-05-30 16:05:58 发布

weixin_34092370

最新推荐文章于 2023-05-30 16:05:58 发布

阅读量978

点赞数

文章标签：数据库 javascript ViewUI

目录结构：

index.js是主进程js。

const electron = require('electron')

const app = electron.app

const BrowserWindow = electron.BrowserWindow

//主进程
const ipc = require('electron').ipcMain;

app.on('ready',function(){
    var mainWindow = new BrowserWindow({
        width: 800,
        height: 600
    })
    mainWindow.loadURL('file://' + __dirname + '/index.html') //主窗口

    mainWindow.openDevTools();

    var presWindow = new BrowserWindow({
        width: 300,
        height: 300,
        show: false
    })

    presWindow.loadURL('file://' + __dirname + '/presWindow.html') //新窗口

    ipc.on('zqz-show',function() {
        presWindow.show()
    })

    ipc.on('hide-pres',function() {
        presWindow.hide()
    })
})

说明：

这里主进程通过ipcMain响应来自index.html(渲染进程ipcRenderer)发出的指令。zqz-show，打开一个窗口

这里主进程通过ipcMain响应来自persWindow.html(渲染进程ipcRenderer)发出的指令。hide-pres，关闭一个窗口

index.html

<!DOCTYPE html>
<html>
<head>
    <title>zqz_electron_demo</title>
</head>
<body>
Hi
</body>
<script type="text/javascript">
    require('./app.js')
</script>
</html>

app.js

const remote = require('electron').remote;
const Menu = remote.Menu;
const MenuItem = remote.MenuItem;

//渲染进程
const ipc = require('electron').ipcRenderer;

var menu = new Menu.buildFromTemplate([
    {
        label: '菜单',
        submenu: [
            {
                label: '打开新窗口',
                click: function(){
                    ipc.send('zqz-show') //注册的指令。send到主进程index.js中。
                }
            }
        ]
    }
])

Menu.setApplicationMenu(menu);

presWindow.html(新窗口页面)

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>presWindow</title>
</head>
<body>

    新窗口

</body>
<script type="text/javascript">
    const ipc = require('electron').ipcRenderer;

    var button = document.createElement('button');
    button.textContent = 'Hide';
    button.addEventListener('click',function(){
        ipc.send('hide-pres') //注册的指令。send到主进程index.js中。
    })
    document.body.appendChild(button)

</script>
</html>

效果：

点击hide窗口关闭。

weixin_34092370

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Electron使用与学习--(页面间的通信)

目录结构： index.js是主进程js。const electron = require('electron')const app = electron.appconst BrowserWindow = electron.BrowserWindow//主进程const ipc = require('electron').ipcMain;ap...
复制链接

扫一扫