客户端开发(Electron)认识窗口2
2023-02-18 16:41:27 时间
Dear,大家好,我是“前端小鑫同学”,?长期从事前端开发,安卓开发,热衷技术,在编程路上越走越远~
Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发 经验。
如何创建一个非矩形的窗口:
调整主进程代码
- 调整窗口的宽高尺寸一致,是窗口变为正方形;
- 调整窗口为透明,效果如下图显示;
- 保持frame属性为false,依然由我们自己来定义边框和标题栏;
- 通常这样的窗口不需要支持窗口大小的调整,我们将属性resizable设置为false;
- 接着我们将窗口最大化的属性也禁用一下。
完整代码如下:
const win = new BrowserWindow({
width: 380,
height: 380,
transparent: true,
frame: false,
resizable: false,
maximizable: false,
show: false,
webPreferences: {
// Use pluginOptions.nodeIntegration, leave this alone
// See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
// nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
// contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
})
调整渲染进程代码:
调整根组件样式,使之成为圆形:
html,
body {
margin: 0px;
padding: 0px;
pointer-events: none;
}
#app {
box-sizing: border-box;
width: 380px;
height: 380px;
border-radius: 190px;
border: 1px solid green;
background: #fff;
overflow: hidden;
pointer-events: auto;
text-align: center;
}
- 现在的效果如下图,四个角的颜色是桌面的壁纸的颜色。
- 此时我们只是看起来是个圆形,但是四个角的部分触发的事件还是在窗口中,我们要做点击穿透;
使用API:win.setIgnoreMouseEvents来动态设置是否忽略鼠标事件;
window.addEventListener('mousemove', event => {
const flag = event.target === document.documentElement
if (flag) {
win.setIgnoreMouseEvents(true, { forward: true })
} else {
win.setIgnoreMouseEvents(false)
}
})
win.setIgnoreMouseEvents(true, { forward: true })
窗口的其他控制:
重写窗口关闭的处理(确认后再关闭):
window.onbeforeunload = function () {
const { dialog } = remote
dialog.showMessageBox(win, {
type: 'warning',
title: '离开此网站?',
message: '系统可能不会保存您所做的更改。',
buttons: ['离开', '取消']
})
.then((res) => {
if (res.response === 0) {
win.destroy()
}
})
return false
}
开启一个模态窗口,我们只有在关闭新打开的模块窗口后才能在原窗口继续操作,和模态Dialog一样;
this.win = new remote.BrowserWindow({
parent: remote.getCurrentWindow(),
modal: true,
webPreferences: {
nodeIntegration: true
}
})
总结:
关于Electron的窗口就先介绍这么多,下一篇将开启界面相关内容的学习。
相关文章
- [KDD 2022 | 论文简读] 通过分层分离的树实现可扩展的差异私有聚类
- [TPAMI | 论文简读] CyCoSeg:用于自动医学图像分割的循环协作框架
- [ARXIV | 论文简读] 混合自编码器的深度无监督聚类
- [ICLR2023 | 论文简读] 用于分子性质预测的元学习自适应深度核高斯过程
- 没有IP和端口号,可以进行socket通信吗?
- [Briefings in Bioinformatics | 论文简读] 潜表征学习的多视角光谱聚类在多组学癌症分型中的应用
- [Medical Image Analysis | 论文简读] Factorizer: 医学图像分割的可扩展可解释上下文建模方法
- [IJCAI | 论文简读] 图像重建的残差对比学习:从噪声图像中学习可转移表示
- epoll使用实例:TCP服务端处理多个客户端请求
- Nature Machine Intelligence | 使用自监督图像表示学习框架精准预测分子特性和药物靶点
- [IEEE Trans Med Imaging | 论文简读] CX-DaGAN:小型CXR数据集上的肺炎诊断之域适应性
- 简易Qt图片查看器
- [EMNLP 2022 | 论文简读] CyCoSeg:基于掩码自编码器的检索预训练语言模型
- [Nat. Biomed. Eng. | 论文简读] 基于自监督深度学习的全切片病理图像快速可扩展搜索
- [NC | 论文简读] devCellPy是一个机器学习支持的管道,用于自动注释复杂的多层单细胞转录组数据
- [IJCAI 2022 | 论文简读] CARD:通过基于类不可知关系的去噪进行半监督语义分割
- [arxiv | 论文简读] 用于加速 MRI 重建的自适应扩散先验
- [KDD 2022 | 论文简读] GraphMAE: 自监督的掩码图自动编码器
- [IEEE | 论文简读] 深度自适应图像聚类
- [Nature communications | 论文简读] 基于图的自编码器整合空间转录组学与染色质图像