Analysis of official template of micro build low code (I)

Micro build low code is now open PC End function , The usage method is to enable the template in the template center , After the template is created successfully, it will be added automatically PC End component library and create the required data source . This paper combines the current official template , Follow the example program to build it yourself . Get familiar with the usage of the official component library through the construction of the template .

Create a page

First of all, I want to help myself Create a new page , We need to build it ourselves according to the front page of the official template .

Logic analysis of official homepage

The official home page actually plays a guiding role , Guide users to click through large pictures

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

Its layout component uses the node component , The node component is equivalent to us html Inside div, Let me draw an example diagram to analyze the structure of the layout

The first floor structure is like this , Then let's add our own layout according to the first layer structure of the analysis

Achieve layout

Node components are in the general category , The way to add is to click the name of the component

But when you add it, you find that the page has not changed , You need to turn off the preview effect

So you can see the effect

Then switch to the component view , We select the slot of the node component

Add two more node components in the slot

So the layout of the outer layer is made .

Official template content area layout analysis

We can see that the content area is divided into upper and lower parts , Above is the title , Below is the shortcut function guidance area

The official template uses node components and grid components

Content area layout implementation

Let's first select the slot of the content area node component

Add node components to the general category

Then add a delete component in the layout category

The effect after the components are built

Official template title area resolution

The title area is relatively simple , In fact, it is to achieve the effect of two lines of the title

The component tree is implemented through text components

Title area function implementation

We also follow the official thinking , Add two text components to the node component of the title

But the two text components are arranged horizontally , It doesn't match the effect of the official template , At this time, you need to set the style of the component . It is generally used to set the layout of the parent container

First, set the width of the parent container , We set it to 1040PX

The upper margin setting of the inner margin 38PX, You can only enter Numbers , So you need to use the style editor to change the word manually

If the outer margin is on the left and right auto

Then it is to set the style of the text component , If the layout is changed to block layout

The inner margin gives a 32PX Size

If the font is set to 12PX, The color is set to blue

Change the content of the text to the front page

Then we set the style of the second text component , Give it an outer margin , Each is 20, If the layout is set as a block layout

The font is set to 20PX In bold

Modify the content of the text to the personal workbench

So the title area is set

Official template analysis of quick function guide area

Functionally speaking, it is a shortcut operation with three modules , The layout is one row and four columns , So four components are placed in the template

The function of quick function guide area is realized

We also follow the official thinking , Add four components to the node component

We need to set the style on the grid component , The layout is set to flex, Spindle alignment is the alignment of both ends

If the outer margin , Up and down are 86PX, Right and left are auto

Width set to 1040PX

The style of the node component inside , The layout is set to inline block , Width 320PX

Set border to solid , Color rgb(220, 227, 243), Width 1PX, Round corners 20PX

After the outer container style is set , You need to set the content inside , The content is to add a node component

But the type of node should be changed to picture , The official address of the picture has been provided

https://main.qcloudimg.com/raw/f28e2d68d4718c2978ae8036c8dc9990.png

Set the layout to inline block layout if the style is , Width 100%, Height 360PX

Fill the background with color , The fill color is rgb(0, 50, 149)

Border set to 20PX

Add two more text components in the current node , Used to display the name of the module

If positioning, set it to absolute positioning , And set the distance from the upper edge 36PX, To the left 36PX

Set the font size to 20PX, In bold , Set the color to white

Modify the content of the text to the candidate information list

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

After the style is set, we need to add a click event to the picture , Select the navigation in the platform method

This completes the setup

summary

Overall PC The terminal setting is much more complex than the mobile terminal , Especially in the understanding of the concept of components , Many attributes require manual code entry , Cannot be set completely on the view , There is still room to be optimized . In the future, we will continue to analyze the official template , Let's get a little familiar with this new function .

author ： Micro build low code preacher Han Kai