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 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 运行查看结果如下:
到此一个简单点击交互完成,感兴趣的同学可以自己动手去尝试。
Electron学习(三)之简单交互操作的更多相关文章
- restql 学习三 查询语言简单说明
restql 中with 参数的内容在restql 中实际上就是http request 的请求内容.按照restql 的设计 method 分为 from (get) , to (post) ,in ...
- git学习(三) git的分支操作
git的分支操作 软件项目中启动一套单独的开发线的方法,可以很好的避免版本兼容开发的问题,避免不同版本之间的相互影响,封装一个开发阶段,解决bug的时候新建分支,用于对该bug的研究: git中跟分支 ...
- 【转载】salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)
salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL) salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesfo ...
- salesforce 零基础开发入门学习(三)sObject简单介绍以及简单DML操作(SOQL)
salesforce中对于数据库操作和JAVA等语言对于数据库操作是有一定区别的.salesforce中的数据库使用的是Force.com 平台的数据库,数据表一行数据可以理解成一个sObject变量 ...
- Git 学习(三)本地仓库操作——git add & commit
Git 学习(三)本地仓库操作——git add & commit Git 和其他版本控制系统如SVN的一个不同之处就是有暂存区的概念.这在上文已有提及,本文具体说明什么是工作区及暂存区,以及 ...
- Scala学习(三)----数组相关操作
数组相关操作 摘要: 本篇主要学习如何在Scala中操作数组.Java和C++程序员通常会选用数组或近似的结构(比如数组列表或向量)来收集一组元素.在Scala中,我们的选择更多,不过现在我们先假定不 ...
- 学习HTML 第五节.简单交互 加个按钮
学习HTML 第五节.简单交互 也许你和我一样,对页面排版的兴趣小于网页交互,那么我们就先略过一些章节,直接先学一下简单交互. 前面点击图片打开链接的网址,已经是最简单的交互方式了,复杂的方式则需要用 ...
- selenium + python自动化测试unittest框架学习(三)webdriver元素操作(二)
上一篇是元素的定位,那么定位元素的目的就是对元素进行操作,例如写入文本,点击按钮,拖动等等的操作 (1)简单元素操作 简单元素操作 find_element_by_id("kw") ...
- day 82 Vue学习三之vue组件
Vue学习三之vue组件 本节目录 一 什么是组件 二 v-model双向数据绑定 三 组件基础 四 父子组件传值 五 平行组件传值 六 xxx 七 xxx 八 xxx 一 什么是组件 首先给 ...
随机推荐
- Java语言学习day24--7月30日
###17创建子类对象过程的细节 * A 创建子类对象过程的细节 * 如果子类的构造方法第一行写了this调用了本类其他构造方法,那么super调用父类的语句还有吗? * 这时是没有的,因为this( ...
- 2021.12.08 [SHOI2009]会场预约(平衡树游码表)
2021.12.08 [SHOI2009]会场预约(平衡树游码表) https://www.luogu.com.cn/problem/P2161 题意: 你需要维护一个 在数轴上的线段 的集合 \(S ...
- 基于.NetCore开发博客项目 StarBlog - (3) 模型设计
系列文章 基于.NetCore开发博客项目 StarBlog - (1) 为什么需要自己写一个博客? 基于.NetCore开发博客项目 StarBlog - (2) 环境准备和创建项目 基于.NetC ...
- 阿里云服务器的购买、基本配置、(xshell)远程连接、搭建环境
一.服务器的购买 1.购买时间点:搞活动的时候.利用学生身份购买 (1)活动:想白嫖一台服务器 双十一,可以在双十一左右,时间提前一点,百度或B站,搜阿里云服务器.腾讯服务器(618可能也有) 一般, ...
- 攻防世界-MISC:base64stego
这是攻防世界新手练习区的第十一题,题目如下: 点击下载附件一,发现是一个压缩包,点击解压,发现是需要密码才能解密 先用010editor打开这个压缩包,这里需要知道zip压缩包的组成部分,包括压缩源文 ...
- XCTF练习题---MISC---Training-Stegano-1
XCTF练习题---MISC---Training-Stegano-1 flag:steganoI 解题步骤: 1.观察题目,下载附件 2.打开下载的图片文件,发现就是一个点,修改文件扩展名,还是说查 ...
- Linux启动故障排查和修复技巧
一个执着于技术的公众号 我发现Linux系统在启动过程中会出现一些故障,导致系统无法正常启动,我在这里写了几个应对单用户模式.GRUB命令操作.Linux救援模式的故障修复案例帮助大家了解此类问题的解 ...
- 新作!分布式系统韧性架构压舱石OpenChaos
摘要:本文首先以现今分布式系统的复杂性和稳定性的需求引出混沌工程概念,并阐述了OpenChaos在传统混沌工程上的优化与创新. 背景 随着Serverless,微服务(含服务网格)与越来越多的容器化架 ...
- 溢出属性,定位,z-index,JS
溢出属性 1.visible(默认值):使溢出内容展示 2.hidden:隐藏溢出内容且不出现滚动条 3.scroll:隐藏溢出容器的内容,溢出的内容可以通过滚动呈现 4.auto:与scroll没啥 ...
- 大陆出境海缆TPE APCN NCP APG简介
目前我国的登陆站主要设立在三个城市 山东 山东青岛登陆站(隶属中国联通) EAC-C2C TPE(美国方向) 上海 上海崇明登陆站(隶属中国电信) APCN2(亚太) NCP(长线--美国,新建,亚太 ...