Shulou(Shulou.com)06/02 Report--

This article mainly shows you "Node.js how to achieve desktop applications", the content is easy to understand, clear, hope to help you solve your doubts, the following let the editor lead you to study and learn "Node.js how to achieve desktop applications" this article.

First we need to create a Node.js project.

We need to install electron dependencies first. The official electron documentation is interpreted as follows:

In fact, in my understanding, the role of electron is a bit like a packaging tool, we can use H5 to develop a website, and then directly use the packaging tool to package into an app. In fact, electron is also such a role, it can package our projects developed with HTML, JavaScript, css into a desktop application, and can be packaged into desktop executable programs under different operating systems at the same time.

Npm domestic access is slow, which may lead to the failure of installation dependencies. So we can use Taobao image to download, using the command:

Npm install cnpm-g-- registry= http://registry.npm.taobao.org

Use cnpm to globally install electron, electron-prebuilt, electron-packager, electron-builder, using the command:

Cnpm install-g electron electron-prebuilt electron-packager electron-builder

Use cnpm to install the aser Packaging tool:

Cnpm install-g asar

So far, all the dependencies required for this article have been successfully installed. Next, initialize the project and use the command:

Npm init

At this point, our previous project configuration is all completed, the next step is to create an index.html, the function is very simple, just a button, click and pop up hello world.

Next, create an index.js, create desktop windows and page rendering in this file.

First introduce the required package at the top of the file and define a global variable win

Why do you need this global variable? Because we need to make a global reference to the desktop window object, otherwise the desktop window will be closed when the end of the life cycle of the local variable is treated as garbage collection.

We need to listen to the ready method, which will be called when the Electron finishes initializing and is ready to create a desktop window. The logical processing for creating a desktop window is called in the ready method.

Listen to the window-all-closed method and exit the desktop application when all desktop windows are closed

Listens to the activate method, which is triggered when app is activated, and usually needs to be handled for macOS. In macOS, a window is recreated when the application icon is clicked and no other window is opened, so make a decision in the activate method. If the window object win is null, create a new window. Otherwise, show the existing window.

At this point, our most basic desktop application has been built, and we can test it with electron with the following command:

Electron.

Click the button to jump out of the hello world.

So we can find that we use electron for desktop application development and we don't need to understand how the html I wrote is transformed into a desktop application executor. In the official explanation, it means that you do the simple part, and leave the complex part to our framework to implement. People like Atom, vs code and wordpress are actually based on electron for development, so the stability of electron is certain.

Next we need to package our application to generate a desktop application startup file, which requires the use of the dependency we just installed: electron-packager. The packaging command is:

Electron-packager. Niyueling-- out.. / electron-node

This packaging command means: use the electron-packager package to package the resources in the current file directory as niyueling to the parent electron-node folder. When packaging, it will automatically determine which operating system you are currently running package to generate the executable file under the corresponding system. If you want to package all operating system executables at once, you can use the command:

Electron-packager. Niyueling-- out.. / electron-node-all

Note: because the browser kernel is fully packaged during packaging, even if your project is less than 1m, the resulting executable will eventually be dozens of megabytes in size.

We can see that a niyueling.exe execution file is generated. If we execute this file, we can run our desktop application.

Finally, let's talk about the advantages and disadvantages of developing desktop applications using Node.js combined with electron mode. Let's talk about its advantages first:

1. If our usual desktop software needs to be upgraded, we generally need to download the latest installation package, but electron-packager packaging is actually a browser kernel and main thread control script, and the specific business logic is independent of a folder, such as the router folder. As long as the main thread logic of our desktop remains the same, whether the UI is adjusted or the interaction is trimmed, we only need to update the resources in the router folder without redistributing the new installation package.

two。 The interface customization is easy to operate, and in principle, it can realize everything that web applications can do.

3. Compared with other cross-platform schemes, it is more stable and has less bug.

So what are the shortcomings of electron?

1. Start slowly because the entire browser kernel will be packaged together.

two。 In addition to the main process, you may need some processes to assist in your work. Every time a new process is started, there is an additional memory overhead, which is too dependent on cpu.

3. The packaged file is too large, as mentioned, because packaging packages the entire browser kernel together.

The above is all the content of the article "how to implement desktop applications in Node.js". Thank you for reading! I believe we all have a certain understanding, hope to share the content to help you, if you want to learn more knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.