“This is the 13th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

Dear, hello, everyone. I am “Front-end Xiaoxin”. 😇 has been engaged in front-end development and Android development for a long time

Electron is a framework for building desktop applications using JavaScript, HTML, and CSS. Embedding Chromium and Node.js into binary Electron allows you to keep a code base of JavaScript code and create cross-platform applications for macOS and Linux running on Windows — no local development experience is required.

Background note:

Window refers to is that we often use the software on the computer end time show the Logo, title and operation to minimize, maximize, close button on the title bar and display content below the title bar of the window, it often contact is not so much in the Web front-end, but should develop a good GUI application experience will need to do a lot of work to window.

Common properties of BrowserWindow:

  • Control window title bar, menu bar

    title The default window title
    icon Icon used when ‘iconType’ is’ custom ‘
    frame Specifying false will not provide a default window
    autoHideMenuBar Auto hide menu bar. Default is not auto hide
    titleBarStyle Window title bar style, ‘default’

  • Control window position:

    x Distance of the window from the left side of the screen
    y Distance of the window from the top of the screen
    center Whether the window is centered
    movable Whether the window can be moved

  • Control window size:

    width Window width (pixels), default 800
    height Window height (pixels), default 600
    minWidth Minimum window width
    minHeight Minimum window height
    maxWidth Maximum window width
    maxHeight Maximum window height
    resizable Whether the window supports zooming by default
    minimizable Whether the window supports minimization, by default
    maximizable Whether the window is maximized is supported by default

  • Whether the renderer is integrated with the Node.js environment:

    nodeIntegration Whether to start Node.js. By default, node.js is disabled
    nodeIntegrationInWorker Whether to enable Node.js in the Web worker
    nodeIntegrationInSubFrames Whether iframe supports Node.js. This function is disabled by default

  • Extended rendering process capabilities:

    preload Specifies a preloaded script file
    webSecurity Whether to disable the same origin policy. By default, the same origin policy is disabled
    contextIsolation Whether to enable a separate context to run

Custom window title bar:

  • The following picture shows the title bar and menu bar at the beginning (remember that I knew the name of each part 👻 at the beginning of my computer class) :

  • The first step I need to customize the title bar of the window is to hide the default title bar, add a frame property to the window object and set it to false, as shown below:

  • Vue app. Vue draws our title bar with HTML tags, and the result after drawing is as follows:

Add event to title bar button:

  • Button events and call functions are defined in the same way as Vue, we need to consider how to connect with Electron to call the corresponding API:

    • Adjust the properties in the window object as shown below, remember to enable remote:

    • Import the electron object in app. vue:

      const { remote } = window.require('electron')
Copy the code

    • The corresponding operation API call:

How to shrink the window when maximized:

  • Listen for window changes to dynamically toggle isMaxSize values to dynamically render the maximized button, primarily through window objects listening for maximize, unmaximize:

    ! [image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d5dc94a302564c8eae0bc43076da3188~tplv-k3u1fbpfcp-zoom-1.im age)Copy the code

  • We know that the refresh can be achieved through the shortcut key CTRL +R, but at this time, when we refresh the page, it will cause the monitor object registered in the window to leak, intuitive performance is that the enlarged window will not shrink, let’s first monitor the key to prohibit the refresh function:

Window state recording and recovery:

  • One of the features of GUI applications is that the position and size of the window can be changed by dragging. When we continue to drag and drop, a large number of events will be generated and most of the events are not necessary for us, so we use anti-jitter to deal with it:

  • After listening to the drag and zoom of the window, we can use it to record window information:

  • The code for restoring window information is as follows:

  • When we modify the main process code and the service automatically restarts, you will notice that the window will return to the center position and then move to the saved window state position. We need to close the display window in the main process and control it in the rendering process:

Conclusion:

This article mainly introduces the Electron development GUI application is to customize the title bar on the window. It has done some simple demonstrations, and there is a follow-up section to complete the whole window part of the content.

Welcome to follow my public account “Front-end Xiaoxin students”, the first time to push original technical articles.