Best Practice | How to use Tencent Cloud Micro-Rail to develop enterprise portal applications from 0 to 1

Overview of Application Function Modules

The enterprise portal application consists of five pages in total, and different pages have different functional modules, as shown in the following figure:

Application show

The main function of the enterprise portal application is the display of enterprise dynamics and enterprise information. The application details are as follows:

Application data source design

data model creation

Before creating an application, we need to know that when there are functional modules that use dynamic data in the application, we need to create a corresponding data model for management. Taking the enterprise portal application as an example, the data model and fields we need to create are as follows:

​	data model name	Field Name	Field data type	Field Description
Application Scenario Table	Application Scenario Title	string	Scenario title used to manage homepage and detail pages
Application scene icon	picture	The application scene icon used to manage the display on the homepage of the enterprise
Application Scenario Description	rich text	Details for managing detail pages
contract customers	array	The element type of the array is selection object, and contains the following two fields: customer name (string): the name used to manage the cooperative customer customer icon (picture): the icon used to manage the cooperative customer
Enterprise dynamic table	dynamic title	string	Enterprise dynamic title used to manage homepage and detail page
dynamic time	date	Date display for managing enterprise dynamics
dynamic picture	picture	Dynamic list image for managing your business
dynamic content	rich text	Used to manage the content display of the dynamic details page
Partner table	Partner icon	picture	Icon display for managing homepage partners
Partner name	string	Name display for managing Page partners

​

Data Entry

After the data model is created, you need to go to data management background to enter the experience data. The steps are as follows:

1. On the data model page, click data management background to enter.
   
2. Go to the data management background > My data source page, change the data to experience data .
   
3. Take the enterprise dynamic table as an example, click management data to enter the corresponding management background.
   
4. Click to create a new to enter the data creation page.
   
5. After entering the experience data on the data creation page, click submit .
   

? In the process of actually building an application, you need to view the real state of the page through real-time preview. Since the data called by the real-time preview is experience data, it is recommended to enter the experience data before developing the application, which is convenient for application development and debugging.

Preconditions

• Complete the data model design of the enterprise portal application.
• Complete the creation of custom application .

Step 1: Create a new page

Create a new page and name it Enterprise Portal Homepage .

Step 2: Create a homepage banner image module

Select the common container component in the editing area on the right side of the page, then place the carousel component in the common container component, and then add the image component to the carousel component to realize the image rotation, if there is one Image configuration requirements, you can select the image component and replace the image in the configuration area on the right.

? The use of common containers enables unified management and style adjustment of components. Therefore, in the actual application development process, it is recommended to place components into common containers in modules, which is convenient for management and improves development efficiency.

[](id:step3)

Step 3: Create a scene navigation

By observing the page design, it can be found that the application scene navigation consists of four navigation Tabs, and the arrangement is horizontal. Therefore, in order to achieve this function, we need to use model variables, grid layout components, and component loop functions.

Create a single navigation tab

1. Create a normal container, add the grid layout component to the container, and configure the column scale property of the grid component to "12".
   
2. Drag a normal container into the sub-column slot of the grid container, and place image and text components in the normal container.
   

? It should be noted here that when placing picture and text components, the picture component in the outline tree needs to be above the text component, otherwise the position will be reversed.

Create model variables

1. Click the variable in the upper right corner to enter the variable editing page.
   
2. On the current page, click create button to create model variables.
   
3. Enter the variable ID, and select the variable type as model variable , the data source as application scenario table , and the variable initialization method as Query List - Built-in (WedaGetRecords) . According to the design of the design diagram, only four navigation Tabs are shown here, so the method parameters are adjusted according to the conditions.
   

Component binding cycle

1. Select the common container component, and click binding loop button in the property > general configuration > loop display on the .
   
2. In the pop-up window, select the model variable you just created, and click to confirm .
   
3. After returning to the editor page, select the image component under the container, and click the data binding button on the right.
   
4. Select the loop variable Tab in the pop-up window, and select the corresponding data model field to complete the data binding.
   
5. Bind the data of the text component as above, and the page style is as follows after completion:
   

style adjustment

After the loop and data configuration are completed, the style of the module is not displayed as in the application design diagram, so we need to adjust the style of the component to make it meet the expectations. First, adjust the width and height of the image component.

1. Click the style tab in the editing area on the right, and adjust the width and height of the picture component to 100.
   

2. You can see that the size of the picture becomes normal, then we adjust the centering state of the picture and text components, click the normal container component, in the style Tab of the configuration area, select the layout mode as flexible layout, the main axis direction is set to vertical, the main axis The alignment is set to horizontal center, and the secondary axis alignment is set to center alignment.
   

   About flex layout:
   The components in the flexible layout container will be adjusted according to the currently set main axis direction, main axis alignment, and sub axis alignment.

3. Then adjust the width of the common container component, set the width to 200, you can see that the components have been arranged according to the style in the design drawing.
   

Step 4: Enterprise Dynamic Navigation

Create a module title

Create a normal container, add text component in the normal container, change the content of the text component to "Latest News" in the configuration area on the right, change the alignment to "Left Alignment", and then click the style Tab, Set the text's property to "Bold".

Create a graphic list

Add a common container, then add the graphic display item component under the container, and then enable the custom content option of the component in the configuration area on the right.

? After enabling the custom content option, the graphic display item component can display content in the form of a slot, just place the component in the main content slot.

Adjust the content of the graphic list component

Delete the text in the "Content" configuration item in the configuration area on the right, and then insert two text components into the main content slot. After the modification is completed, the component style is shown in the following figure:

Create model variables

In the same way as , step 3 , create model variables, bind variables to enterprise dynamic table , and select query list-built-in (WedaGetRecords) for variable initialization method. According to the design of the blueprint, only the four latest developments in time are displayed here, so the method parameters are adjusted according to the conditions.

Component binding cycle

1. Bind the loop to the parent container of the graphic display item. For the binding method, please refer to the loop binding above.
   
2. Select the graphic display item component to bind data to the image property of the graphic display item component.
   
3. Do the data binding for the text component in the same way.
   

Modular style adjustment

1. Select the parent container of the graphic display item, click the style Tab in the configuration area on the right, select the border type as the dotted line, the border width as 1, and the color selection as gray.
   
2. Adjust the spacing of the graphic display items in the style Tab of the parent container, as shown in the following figure:
   
3. Select the outermost container and adjust the spacing between the module and the application scene module. So far, the construction of the enterprise dynamic module is completed.
   

Step 5: Enterprise Partner Module

The same way as the application scene module is created, it is implemented using grid layout, text, and image components. For specific implementation steps, please refer Step 3 .

Application Scenario Details Page Construction

Step 1: Create a new page

Create a new application scene details page. For the page creation process, please refer .

Step 2: Scene Details Module Creation

1. The scene detail module is composed of title and detail content. Create a parent container, and then add a text component and a rich text display component to the parent container to complete the creation of the module.
   
2. Modify the text font size and make it bold in the style tab.
   

Step 3: Create a contract client module

For details, see Application Scenario Creation, the creation method is the same.

! The display content of the details page is obtained according to the jump parameter. For the variable binding of the module here, please refer Application Scenario Page Logic Design .

Enterprise dynamic details page construction

Step 1: Create a new page

Create a new application scenario details page. For the page creation process, see .

Step 2: Scene Details Module Creation

1. The scene details module consists of title and details content. Create a parent container, and then add two text components (corresponding to the title and date respectively) and a rich text display component in the parent container to complete the module creation.
   
2. Modify the text font size and make it bold in the style tab.
   

! The display content of the details page is obtained according to the jump parameter. For the variable binding of the module, please refer Homepage Dynamic Page Logic Design .

Dynamic list page construction

The construction method of the dynamic list page is roughly the same as that of the home page dynamic list module. It is worth noting that the dynamic list page here displays all the dynamics, so there are differences in the bound model variables. Here, the model variables should be called view the list- Built-in (WedaGetList) method.

Enterprise contact page construction

Step 1: Homepage banner diagram module

The construction method is the same as the homepage banner module, see above .

Step 2: Brand Profile Module

1. Create a normal container, and add another container with a width of 80% as the module background, and set the container background color to gray.
   
2. Select the parent container, select the flexible layout in the style tab of the editing area on the right, and center the container just used as the background.
   
3. Add two text components to the background container, which are used as the carrier of the title and the introduction respectively.
   
4. Select the first text component, set the font to bold in the style tab of this component, and modify the text content to company profile.
   
5. Select the second text component, set the alignment of the component to both ends, and modify the text content to the corresponding introduction content, and adjust the maximum number of lines of the text component according to the introduction content.
   

Step 3: Contact Us Module

1. The same as the brand profile module, create a background container and center it, and add a text component in the background container as the module title, modify the content of the text component to "Contact Us" and make it bold.
   
2. Then add two grid layout components to the container, and uniformly adjust the column scale to 12 in the configuration area.
   
3. Insert the picture component and the text component into the slot of the first grid layout component, replace the component content with the icon and the corresponding copy respectively, and adjust the size and position of the component according to the actual needs.
   
4. Repeat the above steps to add the content of the enterprise mailbox to complete the creation.
   

Realize the homepage application scenario navigation and jump to the application scenario details page

Design idea: Obtain the data model ID corresponding to the currently clicked Tab element through a low-code method, then set the jump time for the Tab element, and pass the data model ID as a parameter to the application scene details page. The application scene details page is based on the data The model ID calls the WedaGetRecords method to obtain the corresponding data and displays it on the front-end page.

Step 1: Create a normal variable

Create a common variable for the enterprise portal home page page to receive the data model ID returned when the navigation Tab is clicked. Click the variable above, create a common variable on the current page and name it getId , and select string as the data type.

Step 2: Configure Events for the Navigation Tab

bind variable assignment method

1. Select the common container corresponding to the navigation tab in the outline tree, select the trigger condition of when in the configuration area on the right, and invoke the event configuration pop-up window.
   
2. Select the execution action to assign the variable to the variable name and select the common variable getId just created.
   
3. Click the data binding button to the right of the variable value in the picture above to call up the data binding pop-up window, and select _id in the loop object Tab.
   
4. After completing the variable binding, click to save .
   

Binding page jump method

1. Select the normal container corresponding to the Navigation Tab again and select the trigger condition of clicked in the configuration area on the right, and invoke the event configuration pop-up window.
2. In the event pop-up window, configure the page jump and click create a new parameter variable .
   
3. After the parameter variable is created, click variable binding button .
   
4. After binding the common variable used to receive the data model ID in the first step, click to save .
   

! Here you need to pay attention to the order in which the methods are created. You need to assign variables first and then bind the page jump method. Otherwise, the parameters passed during page jump will be null.

Create model variables

Create a model variable for the application scene details page , and use the parameters passed by the homepage navigation Tab for data query and rendering.

1. Click the upper right corner to switch to the application scene details page , click the variable above, create a model variable for the page, bind the application scene table and select the variable initialization method as Query Single - Built-in (wedaGetItem) , and then The variable initialization input parameter performs variable binding for the data identifier.
   
2. In the variable binding pop-up window, select the parameter variable just generated by the page jump and click save .
   
3. Select the components in the application scene details page in turn, and click variable binding button in the configuration area on the right.
   
4. Binding is done by selecting the model variable you just created.
   

method test

Go to the application home page, open the real-time preview and click the tab button of the application scene to check whether the jump is normal and the content of the details page is displayed as expected.

Realize the homepage dynamic list navigation to jump to the dynamic details page

Design idea: The same as the implementation of Tab navigation in the application scenario, this function is realized by passing in the data source ID when jumping to the details page.

Step 1: Create a normal variable

Create a normal variable for the current page to receive the data model ID returned when the list is clicked. Click the variable above, create a common variable named getListID on the current page, and select String as the data type.

Step 2: Configure Events for the List

Bind custom method

1. Select the common container corresponding to the list in the outline tree, select the trigger condition of when in the configuration area on the right, and invoke the event configuration pop-up window.
   
2. Select the execution action to assign the variable to the variable name and select the common variable getListID just created.
   
3. Click the data binding button on the right side of the variable value in the figure above to call up the data binding pop-up window, and select _id in the loop object Tab.
   
4. After completing the variable binding, click to save .
   

Binding page jump method

1. Select the common container corresponding to the list again and select in the configuration area on the right when the trigger condition of is clicked, and bring up the event configuration pop-up window.
2. Click save after configuring page jump and parameter transfer in the event pop-up window.
   

! Here you need to pay attention to the order in which the methods are created. You need to assign variables first and then bind the page jump method. Otherwise, the parameters passed during page jump will be null.

Create model variables

Create a model variable for the enterprise dynamic details page , and use the parameters passed by the homepage navigation Tab for data query and rendering.

1. Click the upper right corner to switch to the enterprise dynamic details page , click the variable above to create a model variable for the page, bind the enterprise dynamic table and select the variable initialization method as Query Single - Built-in (wedaGetItem) , The initial input parameter is used for variable binding for the data identifier.
   
2. Select the components in the dynamic details page in turn, and click variable binding button in the configuration area on the right.
   
3. Binding is done by selecting the model variable you just created.
   

method test

Go to the homepage of the app, turn on the real-time preview, and click the list to see if it can jump normally and whether the content of the details page is displayed as expected.

?The operation of the dynamic list page jumping to the details page can reuse this module method.

Implement the bottom tab bar jump

1. As can be seen from the application design diagram, there are three pages in the application that need to create Tab components at the bottom, namely the application home page, the dynamic list page and the enterprise contact page.
2. Take the home page as an example. After entering the home page, select the Tab bar component in the component area on the left, and the component will be automatically fixed to the bottom of the page.
   
3. Configure the Tab bar components in the configuration area on the right. The parameter descriptions are as follows:
   
4. After the configuration is complete, click the Enable Routing button below, select the routing method as to jump to , and click the corresponding Tab to jump to the page after the configuration is complete.
   
5. In the same way, you can configure the Tab column of the dynamic list page and the enterprise contact page. So far, we have completed the construction of the enterprise portal application.

The cloud development platform is a one-stop cloud-native platform that helps enterprises develop, deploy and run applications in the cloud. Its features of secure access and reliable operation have been trusted by 2.2 million developers. At present, it has products for different development scenarios, such as cloud development, cloud hosting, micro-build low-code, and cloud development native gateway.
The cloud development platform has serverless capabilities such as elastic scaling and free operation and maintenance. At the same time, as a Tencent ecological connector, it connects ecological products such as Tencent Documents, Tencent Meetings, and Enterprise WeChat, helping enterprises to customize development more easily and boosting performance growth.