Analysis of the official template with low code

The PC-side function is currently open for Mini-Bus. The method of use is to enable the template in the template center. After the template is successfully created, it will automatically increase the PC-side component library and create the required data source. This article combines the currently officially provided template and builds it yourself according to the sample program. Familiarize yourself with the usage of the official component library through the construction of templates.

create page

First of all they create a new page , we need to build it in accordance with the official template of your own home.

official homepage logical analysis

The official homepage actually plays a guiding role, guiding 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 components use node components, which are equivalent to the divs in our html. I will draw a sample diagram to analyze the structure of the layout

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

realize the layout

The node component is in the general category, and the way to add it is to click on the name of the component

But after adding it, there is no change in the page, and the preview effect needs to be turned off.

So you can see the effect

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

Add two node components again in the slot

In this way, 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, the upper part is the title, and the lower part is the shortcut function guide area

The official template uses node components and grid components

content area layout to achieve

We first select the slot of the node component in the content area

Add node components in the general category

Then add the deletion component in the layout category

The effect after the components are built

official template title area analysis

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

The component tree is implemented through text components

title area function realization

We also added two text components to the node component of the title in accordance with the official idea

But the two text components are arranged horizontally, which does not match the effect of the official template. At this time, you need to set the style of the components. Generally set the layout of the parent container

The first is to set the width of the parent container, we set it to 1040PX

The upper margin of the inner margin is set to 38PX, and only numbers can be input, so you need to use the style editor to manually change the word

For the margin, the left and right sides are both auto

Then set the style of the text component, and change the layout to block layout

The inner margin gives a size of 32PX

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

Change the content of the text to the homepage

Then we set the style of the second text component, give it a margin, each of which is 20, and set the layout to block layout

The font is set to 20PX bold

Modify the content of the text as a personal workbench

So the title area is set

quick function guide area official template analysis

Functionally speaking, it is a shortcut operation of placing three modules. The layout is one row and four columns, so four components are placed in the template.

shortcut function guide area function realization

We also follow the official idea to add four components to the node component

We need to set the style on the grid component, the layout is set to flex, and the main axis alignment is justified at both ends

For margins, the top and bottom are 86PX, and the left and right are auto

Set the width to 1040PX

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

The border is set to a solid line, the color is rgb(220, 227, 243), the width is 1PX, and the rounded corners are 20PX

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

But the type of node needs to be modified to a picture, the address of the picture has been officially provided

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

If the style is used, the layout is set to inline block layout, with a width of 100% and a height of 360PX

Use color fill for background, fill color is rgb(0, 50, 149)

The border is set to 20PX

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

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

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

Modify the content of the text as a list of candidate information

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

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

This setting is complete

Summary

In general, PC settings are much more complicated than mobile settings. Especially for the understanding of component concepts, many attributes require manual input of codes, which cannot be set completely on the view, and there is still room for optimization. In the follow-up, we will continue to analyze the official template, and take everyone to familiarize themselves with this new feature.

Author: Han Kai, evangelist with low code in WeTao