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

本文链接：https://blog.csdn.net/David1025/article/details/104377605

通常很多桌面应用，初次打开都需要登录，登录窗口比较小，登录成功之后展示一个更大的窗口，展示登录后的信息。例如QQ，钉钉，有道云笔记这些应用。

那么本文就来演示下如果做到这个功能，我们先做一下准备工作，我们会开发一个简单的小应用来给大家展示这个功能。

UI框架：element-ui
json数据库：lowdb

我们在第一篇文章的代码基础上，再安装这两个依赖

安装element-ui

安装lowdb

配置element-ui

修改main.js

import Vue from 'vue';
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import App from './App.vue';
Vue.use(ElementUI);
new Vue({
  el: '#app',
  render: h => h(App)
});

准备工作已经完成了，接下来就进入正式的开发了

1.修改窗口大小

通常登录窗口比较小，这个我们将登录窗口大小设置为宽：400，高：550
background.js

2.绘制一个登录界面

<template>
  <div class="main">
    <div class="avatar">
      <el-avatar :size="60" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </div>
    <div class="item">
      <el-input placeholder="请输入账号" v-model="account" clearable prefix-icon="el-icon-user"></el-input>
    </div>
    <div class="item">
      <el-input placeholder="请输入密码" v-model="password" show-password prefix-icon="el-icon-lock"></el-input>
    </div>
    <div class="item">
      <el-button type="primary" round @click="login">登录</el-button>
    </div>
  </div>
</template>
<script>
  name: 'Login',
  data () {
    return {
      account: '',
      password: ''
    }
  methods: {
    login () {
      if (this.account === 'admin' && this.password === '123456') {
        this.$router.push('Home')
      } else {
        this.$message.error('用户名或密码错误')
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
.main
  margin-left 30px
  margin-right 30px
.avatar
  margin-top 40px
  margin-bottom 40px
button
  width 100%
.item
  margin-top 20px
</style>

3.修改路由

src/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import Login from '../views/Login.vue'
Vue.use(VueRouter)
const routes = [
  {
    path: '/Home',
    name: 'Home',
  },
  {
    name: 'Login',
    component: Login
  },
  {
    path: '/about',
    name: 'About',
    component: () => import('../views/About.vue')
  }
]
const router = new VueRouter({
  routes
})
export default router

4.修改App.vue

5.修改Home.vue

进入Home页面后，我们要将窗口的大小，调整为正常窗口大小，我们设置宽：1050，高：700；通过第二篇文章，我们知道改变窗口大小是需要再主进程中才能操作，我们Home页面是渲染进程，所以我们这时候要用到进程间通讯。

主进程（background.js）增加以下代码

import { app, protocol, BrowserWindow, ipcMain } from 'electron'
ipcMain.on('changWindowSize', e =>
  win.setSize(1050, 700)
)

Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
  </div>
</template>
<script>
const { ipcRenderer } = require('electron')
export default {
  name: 'Home',
  mounted () {
    this.changeWindowSize()
  },
  methods: {
    changeWindowSize () {
      ipcRenderer.send('changWindowSize')
    }
  }
}

更多内容请关注公众号

三、动态修改窗口大小