Electron-vue cross platform desktop application development practical course (four) — window style & open a new window

Time:2020-6-29

In this paper, we will explain how to modify the window style. The default window of the system is very common, and usually does not conform to the design, so we need to customize. Next, we will explain how to remove the original style and how to realize the minimization, maximization and closing buttons of the window. How to open a new page

First three article portal

Electronic Vue cross platform desktop application development practice tutorial (I) — Hello World

Electronic Vue cross platform desktop application development practice tutorial (2) – common configuration of main process

Electronic Vue cross platform desktop application development practical course (3) — dynamic modification of window size

We are based on the code of the previous article (GIT address of the previous article: https://gitee.com/hedavid/ele… )Then write. Let’s take a look at the implementation style of the previous article
Electron-vue cross platform desktop application development practical course (four) -- window style & open a new window
Electron-vue cross platform desktop application development practical course (four) -- window style & open a new window
Now we’re going to start today

1. Remove the outer border

We modify background.js , modify the CreateWindow method, and add it when creating browserwindow
frame: false

win = new BrowserWindow({
    width: 400,
    height: 550,
    frame: false,
    webPreferences: {
      nodeIntegration: true
    }
  })

The window will look like this:
Electron-vue cross platform desktop application development practical course (four) -- window style & open a new window
But now there’s a new problem. The app doesn’t have a close button, no minimize button, and it can’t drag and drop the location. Next, we’ll create a toolbar for it.

2. Add operation bar

(Note: style adjustment of other pages is also involved here, not listed here, just check the code on GIT)
We modify Login.vue , add the following code (only show the key code, please check the code on git for some styles and HTML):

const { ipcRenderer } = require('electron')
//Click the minimize button to call the method
minimize () {
    ipcRenderer.send('minimize')
},
//Method called by clicking the close button
close () {
    ipcRenderer.send('close')
},

To drag a window, you need to add the following styles:

-WebKit app region: drag; // drag
-WebKit app region: no drag; // cannot be dragged

3. Add corresponding methods of minimizing and closing windows in the main thread

ipcMain.on('close', e =>
  win.close()
)

ipcMain.on('minimize', e =>
  win.minimize()
)

Next, we transform the main page to open a new window

4. Open a new window

4.1 new construction Calendar.vue
<template>
  <div>
    <el-calendar v-model="value"></el-calendar>
  </div>
</template>

<script>
export default {
  name: 'Calendar',
  data () {
    return {
      value: new Date()
    }
  }
}
</script>
4.2 modify router
{
    path: '/Calendar',
    name: 'Calendar',
    component: Calendar
},
4.3 modification background.js
const winURL = process.env.NODE_ENV === 'development'
  ? 'http://localhost:8080'
  : `file://${__dirname}/index.html`

The above code is mainly used to solve the problem of Vue routing access page. The port number is the default port number of Vue startup, which can be modified if necessary

win.loadURL(winURL)

The above code is mainly to modify the URL loaded in the main window and modify the one we declared above

//Define calendar form
let calendarWin
//Create calendar window method
function openCalendarWindow () {
  calendarWin = new BrowserWindow({
    width: 400,
    height: 550,
    Parent: win, // win is the main window
    webPreferences: {
      nodeIntegration: true
    }
  })
  calendarWin.loadURL(winURL + '#/Calendar')
  calendarWin.on('closed', () => { calendarWin = null })
}
ipcMain.on('openCalendarWindow', e =>
  openCalendarWindow()
)

The code above is to open a new window, calendarWin.loadURL (winurl + ‘# / calendar’) is pointing to the page we created above.

4.4 in Home.vue Method of creating new window in page
openCalendarWindow () {
  ipcRenderer.send('openCalendarWindow')
}

Now let’s look at the effect
Electron-vue cross platform desktop application development practical course (four) -- window style & open a new window
That’s all for today. In the next article, we’ll talk about how to send system notification to minimize to tray and clipboard

More content, please pay attention to the official account.

Electron-vue cross platform desktop application development practical course (four) -- window style & open a new window