electron自定义窗口和右键菜单样式

news2024/11/23 8:38:57

前言

electron默认沿用系统UI,并没有提供很多接口供使用者定制样式,如果想要完全自定义的样式,目前我能想到的方案只能是通过前端自定义样式,然后通过进程通信来实现系统基础功能:最大/小化、关闭、拖动窗口等。

效果图:
在这里插入图片描述
在这里插入图片描述

一、窗口自定义

通过前面系列文章我们可以了解到,窗口是通过实例化BrowserWindow对象创建的,实例化时会传入一些窗口的参数。

要实现窗口自定义,就必须把窗口默认样式都屏蔽。几个关键的参数如下:

transparent: true,
backgroundColor:'rgba(0,0,0,0)',
frame:false,

参数含义很好理解,窗体透明无边框,参数详解请查询官网。

把系统自带的窗体样式去掉后,我们会得到一个只有主体的窗口,这个主体就是前端(vue)渲染的窗口,我们可以通过控制它,来实现任何样式的窗口。

但是这会带来一个问题,那就是窗口对象提供的很多便捷功能无法使用了,所以如果需要做最大化、最小化、拖动窗口等功能,只能通过进程通信,前端发送指令,主进程接收指令后,完成相应功能。具体原理请参考本系列前面关于进程通信的文章。

这里简单列一个示例代码,以最大化为例:

//vue代码部分,在某个dom元素上监听事件
<img class="title-icon" src="@/assets/img/maxsize.png"  alt="最大化" @click="handleMaxSize()">

 function handleMaxSize(){
        renderApi.handleMaxSize()
    }
//preload.js中定义通信的api,下面是我项目中所有渲染进程到主进程的通信

const handleSendPageName= (pageName) => ipcRenderer.send('send-page-name', pageName) //渲染进程主动到主进程
const handleMinSize= () => ipcRenderer.send('send-min-size') //渲染进程主动到主进程
const handleMaxSize= () => ipcRenderer.send('send-max-size') //渲染进程主动到主进程
const handleRestore= () => ipcRenderer.send('send-restore') //渲染进程主动到主进程
const handleRelaunch= () => ipcRenderer.send('user-click-Dock-Icon') //渲染进程主动到主进程

const handleCloseWin=()=>{
    ipcRenderer.send('send-auto-close')
}

contextBridge.exposeInMainWorld('renderApi', {
    //监听渲染进程事件
    handleGetStoreFiles,
    handleSendPageName,
    handleMinSize,
    handleMaxSize,
    handleCloseWin,
    handleRestore,
    handleRelaunch
})
//主进程main.js中接收对应的通信
     ipcMain.on('send-max-size', () => {
            if(win.isMaximized()){
                win.unmaximize()
            }else{
                win.maximize()
            }
        })

至此,模拟窗口最大化功能的全部过程就打通了。

二、窗口拖拽功能

这里值得注意的是,拖拽窗口不止是要配置参数,还要给对应dom元素增加类。

比如说我想实现拖动类名为“c-drag”的元素时,拖动窗口移动,大致代码如下:

   <div class="c-drag">

 </div>
.c-drag{
  -webkit-app-region: drag;
}

-webkit-app-region: drag是electron提供的css样式,具体可查询官网。

这是一个比较小众的知识点,网上资料目前较少,这里记录一下。

三、不同窗口设置不同大小

这一部分逻辑略微复杂。

窗口大小的设置一定是在主进程中设置,如果仅仅依靠vue部分控制显示区域大小,不显示区域设置为透明,虽然视觉上可以实现不同的窗体大小,但是这是一种伪实现,因为透明部分只是人眼看不到而已,鼠标点击、拖拽等功能仍然存在,就会对软件用户造成困扰。

在主进程中设置窗口大小,最重要的就是进入不同页面时,要主动向主进程发送指令,并告诉主进程,我现在进入登录页了,我现在进入正常页了,我现在进入xx页……

主进程接收指令后,根据参数,控制窗口的大小即可。

在我的项目中,各页面有一个统一的路由跳转方法,所以我在跳转路由后,同时将活跃页面的name通handleSendPageName发送给主进程。代码如下:

function turnToPage_menu(name) {
  console.log(name)
  turnToPage(router, name)

  renderApi.handleSendPageName(activeName.value) //发送pageName到主进程,以此判断窗口大小

}

主进程接收到指令后,根据参数,决定窗口设置为多大,代码:

  ipcMain.on('send-page-name', (event, pageName) => {
            console.log('setWindowSize',pageName)
            const loginSize={
                width:500,
                height:580
            }
            const pageSize={
                width:1000,
                height: 950
            }
            if (pageName && pageName == 'normalLogin') {
                win.setSize(loginSize.width, loginSize.height)
                win.center()
                win.setMenuBarVisibility(false)

            } else {
                if(this.judgePageSet(win,pageSize,loginSize)){
                    win.setSize(pageSize.width, pageSize.height)
                    win.center()
                    win.setMenuBarVisibility(true)
                }

            }
        })

至此不同页面实现不同大小的窗口功能,就实现了。

其实在我们项目中,还有另一种需求场景,那就是当通过注册表把软件注册到系统右键后,上传文件时,右下角有一个简易窗口,窗口高度根据上传文件数量来计算。这就需要判断命令行参数、获取文件下载地址等操作,更加复杂,但是应用场景应该不多,有兴趣的同学可以私聊,此处不再赘述。

四、右键菜单自定义

我并没有在实际项目中真正实现过右键菜单的自定义,但是道理和窗口是相通的,如果electron提供的右键菜单样式无法满足要求,那就舍弃框架提供的便捷菜单,通过进程间通信,手动实现。

总结

  1. 舍弃系统窗口所有功能,利用通信机制,模拟实现需要的窗口功能。
  2. 判断页面发送的参数,为不同页面的窗口设置不同的样式。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1370214.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

canvas绘制路径之 beginPath() 和 closePath()

查看专栏目录 canvas示例教程100专栏&#xff0c;提供canvas的基础知识&#xff0c;高级动画&#xff0c;相关应用扩展等信息。canvas作为html的一部分&#xff0c;是图像图标地图可视化的一个重要的基础&#xff0c;学好了canvas&#xff0c;在其他的一些应用上将会起到非常重…

权威mcc mnc 列表网址

MCC-MNC.net 链接: MCC-MNC.net 这个网站提供的mcc mnc 比下面itu文档中更全。 itu.int 2023年发布的mcc mnc分配信息&#xff1a; 链接: PDF T-SP-E.212B-2023 若想获取最新的可以参考如下截图查询&#xff1a;

linux开发板静态IP无法ping通外网

硬件平台&#xff1a;韦东山的6ull开发板 问题&#xff1a; 使用网线直连路由器&#xff0c;动态获取IP时能ping通外网&#xff1b; 改为静态IP时&#xff0c;能ping通局域网&#xff0c;但无法ping通外网。 改为静态IP&#xff1a;修改/etc/network/interfaces 测试&#…

论文阅读 Attention is all u need - transformer

文章目录 1 摘要1.1 核心 2 模型架构2.1 概览2.2 理解encoder-decoder架构2.2.1 对比seq2seq&#xff0c;RNN2.2.2 我的理解 3. Sublayer3.1 多头注意力 multi-head self-attention3.1.1 缩放点乘注意力 Scaled Dot-Product Attention3.1.2 QKV3.1.3 multi-head3.1.4 masked 3.…

EDA期末突击

。数模 1.1 进制转换 八位补码计算 1.2 化简函数 卡诺图 卡诺图另类的化简 1.3 逻辑图 看逻辑图 写表达式 列真值表&#xff0c;写出标准与或式 画逻辑图 ———————————————— 1.4 加法器 半加器 全加器 1.5 触发器 —————————————— …

(一)Spring Cloud 直击微服务作用、架构应用、hystrix降级

直击微服务作用 微服务架构: 遇到了什么问题? 将单体架构拆分成微服务架构后,如果保证多个服务(项目)正常运行? 哪个技术可以解决这个问题? 微服务技术 服务治理: 服务管理,维护服务与服务之间的关系 这个技术如何使用? netflix/网…

python 队列

队列常用方法 Python中的队列是一种数据结构&#xff0c;遵循先进先出&#xff08;FIFO&#xff09;的原则。在Python中&#xff0c;你可以使用内置模块queue提供的Queue类来实现队列数据结构。队列是一种常见的数据结构&#xff0c;用于按照特定顺序处理数据项&#xff0c;例…

AcWing 203. 同余方程(扩展欧几里得算法)

题目链接 203. 同余方程 - AcWing题库高质量的算法题库https://www.acwing.com/problem/content/205/ 题解 本题中的同余方程可以转化为ax by 1的形式&#xff0c;利用扩展欧几里得算法可以求得特解为&#xff0c;则通解为。 代码 #include <cstring> #include <…

1878_emacs company backend的选择尝试

Grey 全部学习内容汇总&#xff1a; GitHub - GreyZhang/editors_skills: Summary for some common editor skills I used. 1872_emacs company backend的选择尝试 从C语言开发的使用场景角度&#xff0c;通过测试尝试看看这个company的backend应该来如何配置。 主题由来介…

[AutoSar]基础部分 RTE 07 VFB虚拟功能总线

目录 关键词平台说明一、VFB1.1VFB是什么1.1VFB的好处1.2VFB的坏处 二、VFB在ECU内部的描述2.1Components2.2 Port-Interfaces2.3 Port2.4 Compositions 关键词 嵌入式、C语言、autosar、VFB 平台说明 项目ValueOSautosar OSautosar厂商vector芯片厂商TI编程语言C&#xff0…

python第三方模块之yaml模块

安装: pip install PyYamlPyYaml 5.1之后,通过禁止默认加载程序(FullLoader)执行任意功能,该load函数也变得更加安全。 使用: config.yaml - 10 - 20 - 30 - 40 - 50 --- name: cc age:<

【2024系统架构设计】 系统架构设计师第二版-嵌入式系统架构设计理论与实践

目录 一 嵌入式系统软件架构的原理 二 嵌入式系统软件架构的设计方法 三 案例分析 一 嵌入式系统软件架构的原理 🚀嵌入式系统的典型架构可以分为

126.(leaflet篇)leaflet松散型arcgis缓存切片加载

地图之家总目录(订阅之前必须详细了解该博客) arcgis缓存切片数据格式如下: 完整代码工程包下载,运行如有问题,可“私信”博主。效果如下所示: leaflet松散型arcgis缓存切片加载 下面献上完整代码,代码重要位置会做相应解释 <!DOCTYP

2024年中国杭州|网络安全技能大赛(CTF)正式开启竞赛报名

前言 一、CTF简介 CTF&#xff08;Capture The Flag&#xff09;中文一般译作夺旗赛&#xff0c;在网络安全领域中指的是网络安全技术人员之间进行技术竞技的一种比赛形式。CTF起源于1996年DEFCON全球黑客大会&#xff0c;以代替之前黑客们通过互相发起真实攻击进行技术比拼的…

Redis:原理速成+项目实战——Redis实战8(基于Redis的分布式锁及优化)

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;Redis&#xff1a;原理速成项目实战——Redis实战7&#xff08;优惠券秒杀细节解决超卖、一人一单问题&#xff09; &#x1f4d…

01-你好Python-python环境安装 python解释器的安装 pycharm的安装

python环境安装 官方网址&#xff1a;https://python.org 这里可以下载最新版本的&#xff0c;下载完成以后在自己的浏览器文件下载的文件夹中找到该文件 下载速度可能会比较慢&#xff0c;这里已经提供好了文件&#xff0c;可以直接点击安装 点击Customize installation 点击…

大型语言模型与知识图谱的完美结合:从LLMs到RAG,探索知识图谱构建的全新篇章

最近,使用大型语言模型(LLMs)和知识图谱(KG)开发 RAG(Retrieval Augmented Generation)流程引起了很大的关注。在这篇文章中,我将使用 LlamaIndex 和 NebulaGraph 来构建一个关于费城费利斯队(Philadelphia Phillies)的 RAG 流程。 我们用的是开源的 NebulaGraph 来…

故事机手机平板等智能硬件DVT阶段可靠性测试方法

DVT是什么 DVT是设计样品验证测试评审阶段&#xff0c;这个阶段要进行全面的&#xff0c;客观的测试&#xff0c; 主要测试项目包括&#xff1a;功能测试&#xff0c;安规测试&#xff0c;性能测试&#xff0c;合规测试&#xff08;兼容性&#xff09;&#xff0c;机械测试&am…

Spring MVC中JSON数据处理方式!!!

添加json依赖 <!--spring-json依赖--><dependency><groupId>com.fasterxml.jackson.core</groupId><artifactId>jackson-databind</artifactId><version>2.9.0</version></dependency> 注解 RequestBody&#xff1a;作…

OpenWrt智能路由器Wifi配置方法 目前最安全的WPA2-PSK/WPA3-SAE wifi加密配置方法

OpenWrt默认Wifi是 没有启用, 就算是启用了也是没有任何密码的, 如果需要设置密码需要我们手动进行配置, 配置方式如下: 登录路由器 http://openwrt.lan/ 默认用户名密码 root/password 然后找到 Network --> Wireless 如下图: 点击 Edit --> 然后选择 Interface Co…