当前位置: 首页 > Web前端 > vue.js

electron-vue跨平台桌面应用开发实战教程(三)——动态修改窗口大小

时间:2023-03-31 17:08:15 vue.js

.mainmargin-left30pxmargin-right30px.avatarmargin-top40pxmargin-bottom40pxbuttonwidth100%.itemmargin-top20px前两文简单介绍如何搭建electron-vue项目,主进程的基本配置,以及两者之间的关系主进程和渲染进程通信。在本文中,我们主要讲解如何动态修改窗口大小。通常,很多桌面应用程序在第一次打开时需要登录。登录窗口相对较小。登录成功后,会弹出一个较大的窗口,显示登录后的信息。比如QQ、钉钉、有道云笔记等应用。那么这篇文章会演示如果实现了这个功能,我们会先做一些准备工作,我们会开发一个简单的小应用来给大家展示这个功能。我们这里选择的技术是:UI框架:element-uijson数据库:lowdb我们在第一篇代码的基础上安装这两个依赖安装element-uinpmielement-ui-S安装lowdbnpminstalllowdbconfigureelement-ui修改main.jsimportVuefrom'vue';importElementUIfrom'element-ui';import'element-ui/lib/theme-chalk/index.css';importAppfrom'./App.vue';Vue.使用(ElementUI);newVue({el:'#app',render:h=>h(App)});准备工作已经完成,接下来开始正式开发1.修改窗口大小,通常登录窗口比较小,我们设置登录窗口大小为width:400,height:550background.jswin=newBrowserWindow({width:400,height:550,webPreferences:{nodeIntegration:true}})2.画一个登录界面我们在src/views文件夹下新建一个Login.vue文件,给登录??按钮添加点击事件,并让他跳转到首页。(添加了登录成功和失败的小逻辑).mainmargin-left30pxmargin-right30px.avatarmargin-top40pxmargin-bottom40pxbuttonwidth100%.itemmargin-top20px3.修改路径由src/router/index.jsimportVuefrom'vue'importVueRouterfrom'vue-router'importHomefrom'../views/Home.vue'importLoginfrom'../views/Login.vue'Vue.use(VueRouter)constroutes=[{path:'/Home',name:'Home',component:Home},{path:'/',name:'Login',component:Login},{path:'/about',name:'About',component:()=>import('../views/About.vue')}]constrouter=newVueRouter({routes})exportdefaultrouter4.修改App.vue#appfont-familyAvenir、Helvetica、Arial、sans-serif-webkit-font-smoothingantialiased-moz-osx-font-smoothinggrayscaletext-aligncentercolor#2c3e50margin-top60px5.修改Home.vue进入首页后,我们需要调整窗口大小为正常窗口大小。我们设置宽度:1050,高度:700;通过第二篇我们知道改变窗口大小需要在主进程中操作。我们的首页是渲染进程,所以这个时候就需要使用进程间通信。主进程(background.js)添加如下代码import{app,protocol,BrowserWindow,ipcMain}from'electron'ipcMain.on('changWindowSize',e=>win.setSize(1050,700))Home.vue这是结束动态修改窗口,代码稍后上传到gitee。在下一篇文章中,我们将讲解如何去除窗口自带的外边框,如何自行最小化、最大化、关闭、打开新窗口。更多内容请关注公众号