In addition to providing business functions in the Mini Program, we usually also provide professional knowledge sharing. Knowledge is to improve daily life, and on the other hand, it can also show that you are more professional in your industry.
The information function is divided into two parts, one part is the list function, and the other part is the detail function. According to our low-code development steps, we need to build data sources first, then build components, and finally link pages.
01 Build a data source
Log in to the console of Weizhu, click on the data model, click on the new data model
Enter the name, and the system will automatically generate the logo.
Click Edit to enter the edit view
. Click Add Field. We first need to add a title
and then add a text content field. Select the type of rich text
data source. After the data source is built, go back to the data model list and click Information More, click Manage Data
Click the New button to enter a few test data
02 List function development
With the data source in place, we can start developing the functionality. The rendering of functions depends on the page, and the page needs to be created first. Click the + sign next to the page component area and enter the name of the page.
To develop the list page, we can directly use the data list component. After adding the component, select the data source we just created
to bring the text content into the list by default. We need to change it to create Time, select this component, and bind the content to the creation time
03 Details page development
After the list page is developed, we need to develop the function of the details page. Similarly, click the + sign in the page component area to create a details page. The data details component needs to be
added to the details page. The data model selects the data source we created and
we only need to display it Header and body, delete unnecessary components first. Select the text component, bind the text content as the title
Add a rich text display component, bind the content as the body content
Select the page, we need to add a URL parameter
Select the data details and set a filter condition, so that our data ID is equal to our id
Back to the list page, we define a click event for the list, jump to the details page,
and the function is ready
Summarize
In this article, we explained the list information of a common function and the design of the details page. It is more convenient to use low-code development. If it is a simple scene, it will take a few minutes to configure and not involve development.