A brief analysis of how to develop a content list component in a mini program

This article will share with you a practical application of small program development and introduce how to develop a content list component. I hope it will be helpful to everyone!

We have developed a common search input box on the homepage, but its code is written directly in the homepage file, so it cannot be called is a component. In this article, we will introduce how to write a complete small program component. [Related learning recommendations: 小program development tutorial]

Component composition

Component structure

First of all, components are similar to pages and have a separate folder for maintenance. We first create a components directory in the mini program project to store our components, and then create a directory named search-bar to use as our search box Components.

As mentioned above, components are actually very similar to pages and are composed of a directory, so naturally the content to be displayed is also composed of index.wxmlTo write. So we directly paste the previous part about Search box.

After pasting into components/search-bar/index.wxml, the code format may not be very good , you can right-click a blank space in the file content, or select the code, and then click Format Document to automatically format.

What needs to be noted here is that if there is a resource location reference in our structure file, after modifying the file location, we must confirm whether the modified location references the resource correctly. For example, here, we paste the original content under pages/index/index.wxml to components/search-bar/index.wxml, where the image tag references files under assets/images, you need to confirm that the image reference path in the new location is still valid.

Component style

Similarly, we paste the component style we wrote before

Component declaration

In this way, we have completed the structure and style definition of the component, but the developer tools do not think this is a component yet, so we need Create index.json in the component directory to declare that this directory is a valid component. The method is as shown below.

First, we need to use "component": true in index.json to declare that this is a component

Secondly, we need to use the global method Component() to register the component in index.js. The parameter of this method is an object, in which various pages similar to the page can be defined. For details, please refer to Official Document

Component usage

Then the basic definition of the component is completed , our component is ready for use. Just introduce the component where you need to use it. The introduction method is, for example, declaring the following in our homepage configuration file

Among them, "search-bar" defines the label name of the component, just like the built-in components of the mini program input and image we use, and the following content corresponds to the component’s tag name for the current referrer. Relative position, the search method for this position is the same as the search for the image position in the image tag.

After the above component reference declaration, we can use the component in the page structure file

During this process, if you encounter an error in the console in the lower right corner, you can recompile the project by clicking the compile button in the top center of the developer tools to rewrite and parse various files. If there are still errors after compilation, on the one hand, you can check whether there are indeed errors in the code, and on the other hand, you can try by restarting the developer tools (because the developer tools themselves also have certain bugs, and sometimes strange problems occur)

In addition, I have made some customized settings in the developer tool settings according to my personal development habits, such as automatic saving and code indentation, for reference.

Content list component

After introducing a complete custom component, we will continue to complete the content Development of list component.

The content list is obviously more complicated than the search input box above, but the development method of components is the same. We only need to develop components according to this rule.

First, we create the four core files that make up the component as follows, among which index.js and index.json are the same as those written before.

Next, we complete the list component by writing index.wxml and index.wxss element definition.

Since it is a list, the Loop traversal syntax in the mini program will be used. For this part, you can refer to the Official Document for learning. The specific usage is as follows.

Then, we define the external incoming data received by the component in index.js as follows

In this way, using wx:for in index.wxml to traverse is the properties attribute in index.js List of external incoming data received. Then we immediately introduce this component to the homepage and pass it the real data list. The method of use is still to first declare a reference to the component in index.json, and then use the tag name declared during the reference in the page file.

Here we declare the items attribute for the content list component we defined The data is passed in, and the data comes from the listData defined internally on the homepage. This requires us to declare the data in data of index.js on the homepage. .

data and properties

Here we talk about data and properties What's the difference? data is used to define its own data inside the page or component, while properties is used to receive external incoming data, so only components have this property.

For example, for the content list component, it requires the real list data to be passed in externally, so in properties it is equivalent to customizing the parameters of the component and then using it externally This component can pass data to it through the parameters declared by the component.

Data is passed in

Therefore, we need to understand what the data structure required for component parameters is, such as the list component## we define here #A data list needs to be passed in, and each item in the data list contains text and pictures, so we define the following data on the homepage listData

##As you can see, each item in the list must exactly conform to the data structure used by our component, that is, each data item has a

text

field to display the text content, and an image# The ## field is used to display images accompanying the text. Then back inside our component, we use the item

field representing each item of data to access the data items of the list according to the syntax of

wx:for Make a presentation. The mode parameter of the built-in tag image is also used to declare the size style of the image display.

And written through a series of styles

The final effect of the page display is as shown in the figure below

Finally, we preview our development so far through a real machine The effect of the mini program and comparison with the homepage of the Zhihu mini program are as follows.

The left side is the homepage of the Zhihu mini program, and the right side is the mini program we developed ourselves. Isn’t the effect pretty good?

Summary

Finally, let’s summarize what we learned today. In fact, you can clearly see through the directory. Today we introduced a custom componentThe development process is as follows

• Component creation
• Component definition and declaration
• Component reference
• Incoming component data

Through the above method, combined with the previously mentioned Page development method, we have improved the mini program Develop core skills. After that, we can develop small program pages responsible for different functions according to our own design, and develop a series of custom components based on the functions and characteristics of each page to achieve the effect of flexible combination.

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief analysis of how to develop a content list component in a mini program. For more information, please follow other related articles on the PHP Chinese website!