如何在小程序中开发内容列表组件（如何做一个小程序项目）

本文将与您分享一个小程序开发实践，并介绍如何开发一个内容列表组件，希望对您有所帮助！

我们在主页上开发了一个常用的搜索输入框，但它的代码是直接写在主页文件中的，所以不能称为组件。本文介绍了如何编写一个完整的小程序组件。【相关学习推荐:小程序开发教程】

组件组成组件结构首先，组件类似于页面，它们都有一个单独的文件夹用于维护。我们首先在applet项目中创建一个组件目录来存储我们的组件，然后创建一个名为search-bar的目录作为我们的搜索框组件。

如上所述，组件实际上与页面非常相似，它们都是由一个目录组成的，因此自然地，它们要显示的内容也是由index.wxml编写的。因此，我们只需粘贴前面关于搜索框的部分。

粘贴到components/search -bar/index . wxml后，代码格式可能不太好。您可以右键单击文件内容的空白处，或者选择代码，然后单击“设置文档格式”以自动设置其格式。

这里需要注意的是，如果我们的结构文件中有资源的位置引用，在修改文件位置后，需要确认修改后的位置是否正确引用了资源。例如，在这里，我们将pages/index/index.wxml下的原始内容粘贴到components/search -bar/index . wxml中，其中image标记引用assets/images下的文件，我们需要确认新位置中的图像引用路径仍然有效。

组件样式同样，我们将粘贴先前编写的组件样式。

组件声明通过这种方式，我们已经完成了组件的结构和样式的定义，但是开发人员工具还不认为它是一个组件，因此我们需要在组件目录中创建index.json来声明该目录是一个有效的组件，如下所示。

首先，我们需要使用“in index.json. component & quot:true声明这是一个组件。

其次，我们需要使用全局方法Component（）在index.js中注册该组件该方法的参数是一个对象，在该对象中可以定义各种类似于pages的内容。详情请参考官方文件。

组件的使用然后完成组件的基本定义，我们的组件就可以投入使用了。只要需要使用这个组件，就可以导入它。例如，我们的主页配置文件中的导入方法如下所示

其中“搜索-酒吧& quot它定义了组件的标签名称，就像我们使用的小程序中的内置组件input和image一样，其背后的内容对应于组件与当前referrer的相对位置。找到该位置的方法与在图像标签中找到图像位置的方法相同。

上面的组件引用语句之后，我们就可以在页面结构文件中使用组件了。

在此过程中，如果您在右下角的控制台中遇到错误，您可以通过单击开发人员工具顶部中央的编译按钮来重新编译项目，以重写和解析各种文件。如果编译后仍有错误，一方面可以检查代码是否有错误，另一方面可以通过重启开发者工具来尝试（因为开发者工具本身存在一定的bug，有时会出现奇怪的问题）

另外，我在开发者工具的设置中根据个人开发习惯做了一些列自定义设置，如自动保存、代码缩进等，供参考。

介绍完完整的定制组件后，让我们完成内容列表组件的开发。

内容列表明显比上面的搜索输入框复杂，但是组件的开发方法是一样的，我们只需要按照这个规则开发组件即可。

首先，我们创建了组成组件的四个核心文件，如下所示，其中index.js和index.json与之前编写的文件相同。

然后，我们通过编写index.wxml和index.wxss来完成列表组件的元素定义

因为它是一个列表，所以您将在applet中使用循环遍历语法。关于这部分的学习可以参考官方文档，具体用法如下。

然后，我们将index.js中的组件接收的外部传入数据定义如下。

这样，使用wx:for遍历index.wxml是通过index.js中的properties属性接收的外部传入数据列表，然后我们立即将该组件引入主页并传入实际数据列表。使用方法仍然是首先在index.json中声明对组件的引用，然后使用在页面文件中引用时声明的标记名。

在这里，我们通过声明items属性为我们定义的内容列表组件传入数据，这些数据来自主页内部定义的listData，这要求我们在主页上的index.js的数据中声明这些数据。

数据和属性这里，我们来谈谈数据和属性的区别。数据用于定义页面或组件的内部数据，而属性用于接收来自外部的传入数据，因此只有组件具有该属性。

例如，对于内容列表组件，它需要从外部传入真实的列表数据，因此它相当于在属性中自定义组件的参数，然后当外部使用该组件时，它可以通过组件声明的参数传入数据。

数据输入因此，我们需要知道组件参数的数据结构。例如，我们在这里定义的列表组件需要传入一个数据列表，而数据列表中的每一项都包含文本和图片，因此我们在主页的listData中定义了以下数据。

如您所见，列表中的每一项都应该符合组件使用的数据结构，也就是说，每个数据项都有一个显示文本内容的文本字段和一个显示文本图片的图像字段。

然后回到我们的组件，根据wx:for的语法，我们使用表示每个项目的项目字段来访问列表中的项目并显示它们。内置标签图像的模式参数也用于声明图片显示的大小样式。

通过一系列文体写作

最后页面的效果如下图所示。

最后，我们通过实机预览了我们目前为止开发的小程序的效果，并将知乎小程序的主页对比如下。

左边是知乎小程序首页，右边是我们自己开发的小程序。效果还不错吗？

最后，让我们总结一下今天所学的内容。事实上，从目录中可以清楚地看到，今天我们介绍了一个定制组件开发的完成过程如下。

组件创建、组件定义和声明、组件引用、组件数据传输，通过以上方法，结合前面提到的页面开发方法，我们已经完善了小程序开发的核心技能。之后，我们可以根据自己的设计开发负责不同功能的小程序页面，并根据每个页面所承载的功能和特点开发一系列自定义组件，以达到灵活组合的效果。

更多编程相关知识请访问:编程入门！！

这几篇文章你可能也喜欢：

• 下面来说说小程序中页面传递参数的几种方式（微信小程序页面传递值）。
• 如何在小程序中实现下拉刷新和上拉加载功能？（附代码）（小程序的上拉加载触发器）
• 如何在小程序中创建页面二维码
• 如何通过applet vant组件将默认样式单元px转换为rpx（Vantui applet）
• 再来说说微信小程序中的生命周期（功能）（请谈谈小程序的生命周期功能？)

本文由主机参考刊发，转载请注明：如何在小程序中开发内容列表组件（如何做一个小程序项目） https://zhujicankao.com/107398.html