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 一 什么是组件 首先给 ...
随机推荐
- 腾讯云服务器ssh登录老是自动断开链接的解决办法
vim /etc/ssh/sshd_config 找到下面两行 #ClientAliveInterval 0 #ClientAliveCountMax 3 去掉注释,改成 ClientAliveInt ...
- 2021.12.06 平衡树——Treap
2021.12.06 平衡树--Treap https://www.luogu.com.cn/blog/HOJQVFNA/qian-xi-treap-ping-heng-shu 1.二叉搜索树 1.1 ...
- shell语法习题练习进阶版
第4章 shell语法深度习题练习 4.1 使用if,case,函数的方法将服务改成system(centos6) 4.1.1 if方法 4.1.1.1 system实现 4.1.1.1.1 编写代码 ...
- python基础练习题(题目 一个数如果恰好等于它的因子之和,这个数就称为"完数"。例如6=1+2+3.编程找出1000以内的所有完数)
day12 --------------------------------------------------------------- 实例019:完数 题目 一个数如果恰好等于它的因子之和,这个 ...
- Ubuntu 20.0.4 安装 NVIDIA N卡 驱动 画面撕裂 解决方法
电脑 联想 Y7000 系统 Ubuntu 20.0.4 显卡 NVIDIA 1050TI 以下操作需要管理员权限 编辑文件,如果没有新建一个 /lib/modprobe.d/nvidia-graph ...
- 带你了解极具弹性的Spark架构的原理
摘要:相比MapReduce僵化的Map与Reduce分阶段计算相比,Spark的计算框架更加富有弹性和灵活性,运行性能更佳. 本文分享自华为云社区<Spark架构原理>,作者:JavaE ...
- 3.4 常用Linux命令
1.cat命令 cat命令用于查看纯文本文件(内容较少的) 2.more命令 more命令用于查看纯文本文件(内容较多的),语法格式为"more [参数] 文件名称". 3.hea ...
- 【面试普通人VS高手系列】死锁的发生原因和怎么避免
一个去阿里面试的小伙伴私信我说:今天被一个死锁的问题难到了. 平常我都特意看了死锁这块的内容,但是回答的时候就想不起来. 这里可能存在一个误区,认为技术是要靠记的. 大家可以想想,平时写代码的时候,这 ...
- centos7系统安装 VMware
安装版本: CentOS-7-x86_64-DVD-2009.iso 下载地址:阿里巴巴开源镜像 第一步:打开虚拟机,新建虚拟机引导,选择高级,下一步. 第二步:默认下一步 第三步:选择最后一项, ...
- PowerJob高级特效-容器部署完整教程
介绍 powerjob提供了容器功能,用来做一些灵活的任务处理.这里容器为 JVM 级容器,而不是操作系统级容器(Docker).(至于为什么取"容器"这个有歧义的名字是因为作者没 ...