This is the fifth day of my participation in Gwen Challenge.

What is the Electron

Build cross-platform desktop Applications using JavaScript, HTML, and CSS

Electron is an open source framework developed by GitHub. It allows desktop GUI application development using Node.js (as the back end) and Chromium (as the front end). Electron has been used for front-end and back-end development by several open source Web applications, including GitHub’s Atom and Microsoft’s Visual Studio Code. – zhihu

Electron does the hard work, and we just build the application using our Web technology.

Build the Electron Project

The most convenient is to use scaffolding, now mature scaffolding in the market such as ElectronForge, electron-Vue, etc., or to build a project with their own document structure, here provides a quick way to start.

Sample project warehouse $# cloning git clone https://github.com/electron/electron-quick-start # $CD electron - quick to enter the warehouse - start # installation and operation of $ npm install && npm startCopy the code

Why add a startup animation

To optimize the user experience, of course (to cover up the fact that my project was slow to launch). Different projects and services have different start-up requirements. For example, some applications need to detect upgrade status, login status or some additional services such as microphone and camera, and some applications need to load a large amount of data to support them at the beginning. Of course we want to make sure that the user double-clicks the icon and immediately enters the app, but it takes time to run the code and load the data and so on. In that case, instead of showing the user how the code works, why not show the user a picture? That’s the user experience. Let the user know that the app is loading at this point, rather than assuming that the app is stuck or crashed.

Ideas and Implementation

Basically, the launch window is also a window, and we want it to appear in the user’s vision when the project is not ready and say I’m starting and close when I’m ready. And we do not need to use how complicated means, the main method is to listen to our main window process, when ready to close the start window.

First we need to create a loading HTML page, which can draw our startup window and various smooth waiting effects. We then create a method in the main process that generates the Loading window, and receive a callback function that fires when the Loading window is generated.

const showLoading = (cb) = > {
    loading = new BrowserWindow({
        show: false.frame: false.// No border (window, toolbar, etc.), only contains the content of the web page
        width: 160.height: 180.resizable: false.transparent: true.// Whether the window supports transparency, if you want to do advanced effect best set to true
    });

    loading.once("show", cb);
    loading.loadFile("loading.html");
    loading.show();
};
Copy the code

We then call the showLoading method at project startup and pass in the method to create the main window.

const createWindow = () = > {
  window = new BrowserWindow({
    webPreferences: {
      nativeWindowOpen: true.title: "Main window",},width: 800.height: 600.show: false});setTimeout(() = > {
        window.loadFile("index.html");  // Simulate startup preparation time
  }, 2000);
  window.once("ready-to-show".() = > {
    loading.hide();
    loading.close();
    window.show();
  });
};

app.on("ready".() = > {
  showLoading(createWindow);
});
Copy the code

Close our launch window and display our main window when our main window is ready. Note that there may be flickering if you close the startup window directly, so we will hide the window before closing it.

See the effect:

The last

Through this example we can learn about BrowerWindow instance events, and can use these corresponding events to achieve some of the desired effects, such as the user mouse focus, out of focus application, show and hide the window when the operation.