Electron-vue跨平台桌面应用开发实战教程（四）-窗口样式&打开新窗口

本文将讲解如何修改窗口样式。系统默认的窗口很常见，通常与设计不符，所以我们需要对其进行自定义，接下来我们讲解如何去掉原有的样式，如何实现窗口的最小化、最大化和关闭按钮。以及如何打开新页面前三篇传送门electron-vue跨平台桌面应用开发实战教程（一）——HelloWorldelectron-vue跨平台桌面应用开发实战教程（二）——主流程常用配置electron-vue跨平台桌面应用开发实战教程（三）——动态修改窗口大小我们是基于上一篇文章的代码（上一篇文章的git地址：https://gitee.com/hedavid/ele...)然后写。先看上篇文章实现的样式：接下来开始今天的讲解1.去除外边框。我们修改background.js，修改createWindow方法，在创建BrowserWindow时添加frame:falsewin=newBrowserWindow({width:400,height:550,frame:false,webPreferences:{nodeIntegration:true}})这样window会变成这样：但是现在有一个新的问题，应用程序没有关闭按钮，没有最小化按钮，也不能拖拽移动位置，然后我们给他创建一个工具栏。2、添加操作栏（注意：这还涉及到其他页面的样式调整，这里就不一一列举了，直接在git上查看代码）我们修改Login.vue，添加如下代码（仅关键代码显示，部分样式和html请查看git上的代码):const{ipcRenderer}=require('electron')//点击最小化按钮调用的方法minimize(){ipcRenderer.send('minimize')},//点击关闭按钮调用的方法close(){ipcRenderer.send('close')},窗口的拖动需要添加如下样式：-webkit-app-region:drag;//draggable-webkit-app-region:no-drag;//不可拖动3.在主线程添加相应的最小化和关闭窗口的方法ipcMain.on('close',e=>win.close())ipcMain.on('minimize',e=>win.minimize())接下来我们修改主页面实现打开新窗口的功能4.打开新窗口4.1新建一个Calendar.vue4.2修改路由器{path:'/Calendar',name:'Calendar',component:Calendar},4.3修改background.jsconstwinURL=process.env.NODE_ENV==='development'?'http://localhost:8080':`file://${__dirname}/index.html`以上代码代码主要用于解决vue路由访问页面的问题。端口号是vue启动的默认端口号。如果需要，可以修改win.loadURL(winURL)上面的代码主要是修改主窗口加载的url。上面我们声明的//定义日历形式letcalendarWin//创建日历窗口方法functionopenCalendarWindow(){calendarWin=newBrowserWindow({width:400,height:550,parent:win,//win是主窗口webPreferences:{nodeIntegration:true}})calendarWin.loadURL(winURL+'#/Calendar')calendarWin.on('closed',()=>{calendarWin=null})}ipcMain.on('openCalendarWindow',e=>openCalendarWindow())上面的代码是打开新窗口的代码，calendarWin.loadURL(winURL+'#/Calendar')指向我们上面创建的页面4.4在Home中调用创建新窗口的方法.vuepageopenCalendarWindow(){ipcRenderer.send('openCalendarWindow')}接下来我们看一下效果。以上就是今天的全部内容。在下一篇文章中，我们将讨论如何发送系统通知、最小化到托盘和剪贴板。更多内容请关注公众号