At present, the micro build low code has opened the PC function. To use the template, you need to enable the template in the template center. After the template is created successfully, the PC component library and the required data source will be automatically added. This article is combined with the current official provided template, according to the example program to build their own. Familiarize yourself with the official component library through template construction.

Create the page

First of all, create a new page by ourselves. We need to build the homepage according to the official template.

Official homepage logical analysis

The official home page is actually to play a guiding role, through the big picture to guide users to click

Then we switch to the component view to analyze which components are used on the home page

Its layout component uses node components, which are the HTML equivalent of divs. Let me draw an example diagram to analyze the layout structure

The first layer structure looks like this, so let’s add our own layout based on the first layer of the analysis

To realize the layout

Node components are in the generic category and are added by clicking on the name of the component

But when I add it, I find that the page does not change, so I need to close the preview effect

So you can see the effect

Then switching to the Component view, we select the slot for the node component

Add the two node components to the slot again

So the layout of the outer layer is done.

Official template content area layout resolution

As you can see, the content area is divided into two parts, the top is the title, and the bottom is the shortcut function guide area

The official template uses a node component and a grid component

Content area layout implementation

Let’s start by selecting the slot for the content area node component

Add a node component to the generic category

Then add the deletion component to the layout category

The effect after the component is constructed

Official template title area resolution

The header area is relatively simple, and essentially implements the effect of two lines of the header

The component tree is implemented through text components

The title area function is realized

We also added two text components to the node component of the title, following the official idea

However, the two text components are arranged horizontally, which does not match the effect of the official template. At this point, you need to set the component style. This is usually to set the layout of the parent container

First, set the width of the parent container, which we set to 1040PX

The top margin is set to 38PX, and only numbers can be entered, so you need to manually change the words using the style editor

The left and right margins are both auto

The next step is to style the text component, or block layout for the layout

Give the margin a size of 32PX

Set the font to 12PX and the color to blue

Change the text to the front page

Then we set the style for the second text component, giving it a margin of 20 each, and a block layout for the layout

Set the font to 20PX bold

Modify the content of the text for the personal workbench

The header area is set

Analyze the official template of the shortcut function boot area

Functionally, it’s a shortcut to put three modules, and the layout is four columns per row, so there are four components in the template

Quick function guide area function realization

We also added four components to the node component following the official idea

We need to style the grid components, set the layout to Flex, and align the spindle to both ends

The margins are 86PX up and down, and auto left and right

Set the width to 1040PX

The layout of the node components is set to an inline block with a width of 320PX

Set the border to a solid line, color RGB (220, 227, 243), width 1PX and rounded corners 20PX

Once the outer container style is set, you need to set the contents of the inner container, which will be added as a node component

However, the node type should be changed to the picture, and the address of the picture has been provided officially

Main.qcloudimg.com/raw/f28e2d6…

Set the layout to an inline block layout with a width of 100% and a height of 360PX

For the background, I’m gonna fill it with a color, RGB (0, 50, 149)

The border is set to 20PX

Add two more text components to the current node to display the module name

For positioning, set it to absolute and set it to 36PX from the top and 36PX from the left

Set the size to 20PX, bold, and color to white

Change the content of the text to the list of candidates

Let’s style the second text component in the same way

Once the styling is set we need to add a click event to the image. Select navigation in the platform method

And that’s all set up

conclusion

In general, the PC setup is much more complex than the mobile setup, especially the understanding of component concepts, many properties need to be manually input code, can not be completely set on the view, there is still room for optimization. We will continue to analyze the official template, with you a little bit familiar with this new function.

Author: Small build low code evangelist Han Kai