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

博客动态

 0  138

优雅殿下 2022-07-01 21:01:14

悬赏：0 积分收藏

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

写在前面

最近一直在做批量测试工具的开发，打包的exe，执行也是一个黑乎乎的dos窗口，真的丑死了，总感觉没个界面，体验不好，所以就想尝试写桌面应用程序。

在技术选型时，Java窗体实现使用JavaFx、Swing，感觉都不太理想，为什么呢？

写好后，都是通过 Application.launch 启动，仅能运行一次，不能多次调用（硬伤呀！）。

作为一个测试仔，没办法只好找开发了。

于是，我又去找强哥（之前北京同事），强哥给我推荐了electron，我一查，才发现真的太秀了，太好看了吧，结果我就被种草了，真的是太想学了......

需求

故事讲完了，开始干活了，具体需求如下：

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

1、引入样式

安装bootstrap命令如下：

npm install bootstrap --save

2、点击按钮可以打开另一个界面

在根目录下创建一个名为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 >    <h1>我的播放器</h1>    <button type="button" id="add-music" >添加歌曲到曲库</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 >    <h1>添加音乐到曲库</h1>    <div id="musicList" >您还未选择任何音乐文件</div>    <button type="button" id="select-music" >        选择音乐    </button>    <button type="button" id="add-music" >        导入音乐    </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()})