十三年专注于网站建设与互联网应用开发,低调、有情怀的网络应用服务商!
南昌百恒科技微信公众号 扫一扫关注
tel-icon全国服务热线:400-680-9298,0791-88117053
扫一扫关注百恒科技微信公众号

electron开发时如何实现自定义窗口?

百恒 2023-03-16 16:24:35 556
       Electron是一种前端开发框架,在开发Electron应用时,我们往往希望用更好看的窗体代替系统原有的窗体,所以我们有很多的技术人员会选择用自定义窗口,下面南昌APP开发公司百恒科技小编来跟大家聊一下electron开发时如何实现自定义窗口。


electron开发时如何实现自定义窗口


       实现思路

       在electron的窗口中配置frame为false制作无边窗口
       自己绘制toolbar
       利用electron中的remote获取当前窗口的方法获取到当前窗口
       将自己绘制的toolbar和窗口的方法进行对接

       实现细节

       仓库地址:https://github.com/wbjqiqi/electron-demos.git

       在electron的窗口中配置frame为false

       new BrowserWindow({ ... frame: false, ... }); 

       自己绘制toolbar
       蕞好放进公有组件里面,方便实现不同页面不同的toolbar
       利用electron中的remote获取当前窗口的方法获取到当前窗口
       获取当前窗口

       import {remote} from 'electron'; remote.getCurrentWindow(); 

       将自己绘制的toolbar和窗口的方法对接
       放大/缩小/关闭/复原

       const currentWindow = remote.getCurrentWindow(); currentWindow.maximize(); currentWindow.minimize(); currentWindow.close(); currentWindow.restore(); 

       窗口的拖动与拉伸
       通过样式解决

       -webkit-app-region: drag; 

       注意拖动的区域要预留一条边隙,否则无法拉伸与缩小,大约4px

       以上是南昌APP开发公司百恒科技小编要跟大家聊到的关于electron开发时如何实现自定义窗口的内容,希望能够对大家有所帮助,想要了解更多关于这方面的内容,欢迎留言咨询百恒科技,百恒科技专注于南昌APP开发南昌网站建设开发等互联网服务16年。


相关文章推荐    :    常用的正则表达式代码     

                           常见的富文本编辑器有哪些?     
400-680-9298,0791-88117053
扫一扫关注百恒网络微信公众号

欢迎您的光顾,我们将竭诚为您服务×

售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售前咨询 售前咨询
 
售后服务 售后服务
 
备案专线 备案专线
 
售后服务 售后服务
 
×