Electron是一种前端开发框架，在开发Electron应用时，我们往往希望用更好看的窗体代替系统原有的窗体，所以我们有很多的技术人员会选择用自定义窗口，下面南昌APP开发公司百恒科技小编来跟大家聊一下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年。


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

                           常见的富文本编辑器有哪些？