A friend asked me to develop a desktop application based on H5-Dooring. Recently, when I had time, I spent half a day to develop the desktop offline software Dooring- Electron from zero using electron.

Because the electron was used less before, I just learned it today, and basically opened the front and back ends. At the end of the article, I will put the Github address of the doing-electron for your reference. If you have a better plan, please feel free to discuss it with me.

Dooring – Introduction to the electron architecture

Those of you familiar with Electron may know that Electron inherits a multi-process architecture from Chromium, which makes it architecturally very similar to a modern web browser. We can control two types of processes: the main process and the renderer.

Each Electron application has a single main process that serves as the application entry. The main process runs in the Node environment and we have access to all Node capabilities.

So what can we do in the main process? The main purpose of the main process is to create and manage application Windows using the BrowserWindow module.

Each instance of the BrowserWindow class creates an application window and loads a Web page in a separate renderer process. We can interact with webContent from the main process using the window’s webContent object.

Based on the above, I draw a simple structure diagram of the Dooring electron for you to understand:

For more intuitive understanding of electron, you can also refer to its official website:

www.electronjs.org/

The technology stack of the Dooring -electron is:

koa2 + electron + react + umi3

I’m going to show you how to learn to use the Dolling-electron.

Installation and use of the Dooring -electron

Let’s try it out before we install it.

The installation

  1. Download the code
git clone [email protected]:MrXujiang/dooring-electron-lowcode.git
Copy the code
  1. Installing dependency Packages
yarn install
or
cnpm install
Copy the code
  1. Building front-end packages
cd ./renderer
Install front end pack
yarn
# Build front-end packages
yarn build
Copy the code

Local boot

Starting applications locally

yarn debug:main
Copy the code

Project package

Building test packages
NPM run pack // Output only packages for easy testingCopy the code
Building the Installation Package
  1. Perform front-end resource packaging
NPM run build // React resource packageCopy the code
  1. Run the electron build command to output the installation package
NPM Run dist- MAC // NPM Run dist-win // Windows NPM Run dist- Linux // Linux NPM Run dist-all // All platform packagesCopy the code

For details about the configuration rules, see the following official documents:

www.electron.build/configurati…

Install the case

I use the packaged output dist- MAC as an example to demonstrate how to install on a MAC. First, we find the packaged release directory and drag it into applications:

Windows and Linux versions are also very easy to install, you can try it yourself.

How to learn electron quickly

Here I will talk about how to get started using electron quickly. It is best to have the following knowledge base before using electron first:

  • HTML + JS + CSS basics
  • Familiar with nodeJS basic API

With the above foundations, we will learn electron very quickly. For electron itself, we just need to learn the API introduction (learn on demand) and demo on its website. If you do not understand the place, also welcome to communicate with me at any time. After all, I’m just on my way to learning haha.

Dooring’s latest updated guide

Recently, the H5-Dooring visual building platform has continued to be iterated, with the data source basically set up and more intelligent directions to follow. Here is the latest update log:

  1. Optimize the template library
  2. Global configuration page added wechat sharing icon
  3. Component support animation, add 10+ animation effect
  4. Connect to wechat ecology, support H5 to share wechat friends and circle of friends
  5. Optimize the friendchain style

Domestic lowcode platform still has a long way to go, looking forward to your efforts 💪!

More low code/visualization related technology sharing and implementation, welcome to wechat search interesting talk front-end learning exploration.

Doing-electron address: github.com/MrXujiang/d…