Electron学习（三）之简单交互操作

点击按钮可以打开另一个界面
按钮及界面都需要样式

引入样式
安装bootstrap命令如下：
npm install bootstrap --save
点击按钮可以打开另一个界面
在根目录下创建一个名为renderer的文件夹，并创建index.js,其作用就是向主进程发出通信，具体代码如下：

点击查看代码

 const { ipcRenderer } = require('electron')
document.getElementById('add-music').addEventListener("click",()=>{
    ipcRenderer.send("add-music-window")
})

再创建一个名为index.html,示例代码如下：

点击查看代码

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
 
    <link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
 
    <title>本地音乐播放器</title>
</head>
<body>
<div class="container m-4">
    <h1>我的播放器</h1>
    <button type="button" id="add-music" class="btn btn-primary btn-lg btn-block m-4">添加歌曲到曲库</button>
    <!-- Content here -->
</div>
<script src="./index.js"></script>
</body>
</html>

再创建一个名为add.js,示例代码如下：

点击查看代码

 const { ipcRenderer } = require('electron')
document.getElementById('add-music').addEventListener("click",()=>{
    ipcRenderer.send("add-music-window")
})

再创建一个名为add.html,示例代码如下：

点击查看代码

 <!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加音乐</title>
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
    <h1>添加音乐到曲库</h1>
    <div id="musicList" class="mb-2">您还未选择任何音乐文件</div>
    <button type="button" id="select-music" class="btn btn-outline-primary btn-lg btn-block mt-4">
        选择音乐
    </button>
    <button type="button" id="add-music" class="btn btn-primary btn-lg btn-block mt-4">
        导入音乐
    </button>
</div>
<script>
    require('./add.js')
</script>
</body>
</html>

接着再来修改main.js代码，使用ipcMain来接收渲染进程发起的点击事件，示例代码如下：

点击查看代码

 const { app, BrowserWindow,ipcMain } = require('electron')
const createWindow = () => {
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true,
            contextIsolation: false,
        }
    })
    win.loadFile('./renderer/index.html')
    ipcMain.on("add-music-window",()=>{
        const childWin = new BrowserWindow({
            width: 500,
            height: 300,
            webPreferences: {
                nodeIntegration: true,
                contextIsolation: false,
            },
            parent:win
        })
        childWin.loadFile('./renderer/add.html')
    })
}
 
 
app.whenReady().then(() => {
    createWindow()
 
    app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
    })
})
 
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') app.quit()
})

效果npm start运行查看结果到此一个简单点击交互完成。

posted @ 2022-09-19 00:13 小雄(416731103) 阅读(115) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· Electron学习（二）之主进程与渲染进程的通讯

· Electron学习（一）

· Electron学习（三）之简单交互操作

· Electron学习（二）之主进程与渲染进程的通讯

· electron 简单 demo 并打包 linux

阅读排行：
· 全网最简单！3分钟用满血DeepSeek R1开发一款AI智能客服，零代码轻松接入微信、公众号、小程
· .NET 10 首个预览版发布，跨平台开发与性能全面提升
· 《HelloGitHub》第 107 期
· 全程使用 AI 从 0 到 1 写了个小工具
· 从文本到图像：SSE 如何助力 AI 内容实时呈现？（Typescript篇）

公告

昵称：小雄(416731103)
园龄： 13年
粉丝： 0
关注： 0

+加关注

2025年3月

日

一

二

三

四

五

六

小雄(416731103)

Electron学习（三）之简单交互操作

公告

搜索

常用链接

最新随笔

积分与排名

随笔分类 (21)

随笔档案 (16)

阅读排行榜

	const { ipcRenderer } = require('electron')
	document.getElementById('add-music').addEventListener("click",()=>{
	ipcRenderer.send("add-music-window")
	})

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="UTF-8">
	<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">

	<link href="../node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>

	<title>本地音乐播放器</title>
	</head>
	<body>
	<div class="container m-4">
	<h1>我的播放器</h1>
	<button type="button" id="add-music" class="btn btn-primary btn-lg btn-block m-4">添加歌曲到曲库</button>
	<!-- Content here -->
	</div>
	<script src="./index.js"></script>
	</body>
	</html>

	const { app, BrowserWindow,ipcMain } = require('electron')
	const createWindow = () => {
	const win = new BrowserWindow({
	width: 800,
	height: 600,
	webPreferences: {
	nodeIntegration: true,
	contextIsolation: false,
	}
	})
	win.loadFile('./renderer/index.html')
	ipcMain.on("add-music-window",()=>{
	const childWin = new BrowserWindow({
	width: 500,
	height: 300,
	webPreferences: {
	nodeIntegration: true,
	contextIsolation: false,
	},
	parent:win
	})
	childWin.loadFile('./renderer/add.html')
	})
	}


	app.whenReady().then(() => {
	createWindow()

	app.on('activate', () => {
	if (BrowserWindow.getAllWindows().length === 0) createWindow()
	})
	})

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