electron-vue跨平臺桌面應用開發實戰教程（三）—修改窗口大小 ex 頭條網

electron-vue跨平臺桌面應用開發實戰教程（三）—修改窗口大小

2020-10-19 06:40:59 佚名

前边两篇文字简单介绍了一下怎么搭建electron-vue项目，主进程的基本配置，主进程和渲染进程之间的通讯。本文我们主要来讲解下如何动态的修改窗口大小。

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

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

这里我们选用的技术为：

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

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

安装element-ui

<code>npm i element-ui -S
/<code>

安装lowdb

<code>npm install lowdb
/<code>

配置element-ui

修改main.js

<code>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)
});
/<code>

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

1.修改窗口大小

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

<code> win
 =
 new
 BrowserWindow({
    width:
 400
,
    height:
 550
,
    webPreferences:
  
{
      nodeIntegration:
 true
    }
  })
/<code>

2.绘制一个登录界面

我们再src/views 文件夹下新建Login.vue文件，给登录按钮加上点击事件，让它跳转到Home页。(增加了登录成功失败的小逻辑)

<code><
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
>

export
 default {
  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
>
/<code>

3.修改路由

src/router/index.js

<code>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',
    component: Home
  },
  {
     
path
: '/',
    name
: 'Login',
    component: Login
  },
  {
    path
: '/about',
    name
: 'About',
    component
: 
()
 =>
 import
('../views/About.vue')
  }
]
const
 router = new VueRouter({
  routes
})
export
 default router
/<code>

4.修改App.vue

<code><
template
>
  <
div
 id
="app" 
>
    <
router-view
/>
  
div
>
template
>
<
style
 lang
="stylus"
>

#app
  font-family
 Avenir
, Helvetica
, Arial
, sans-serif
  -webkit-font-smoothing
 antialiased
  -moz-osx-font-smoothing
 grayscale
  text-align
 center
  color
 #2c3e50 

  margin-top
 60px
style
>
/<code>

5.修改Home.vue

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

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

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

Home.vue

<code><
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')
    }
  }
}
script
>
/<code>