简单分析如何在迷你程序中开发内容列表组件（如何创建和开发迷你程序）

本文分享了实用的迷你程序开发实践，并介绍了如何开发内容列表组件。我希望它对每个人都有帮助！

我为主页开发了一个通用的搜索输入框，但是代码直接写在主页文件中，因此不能称为组件。 在本文中，我们将向您展示如何编写完整的小程序组件。 [相关学习建议：迷你程序开发教程]组件

首先，组件与页面相似，并带有单独的文件夹以进行维护。 首先，在applet项目中创建一个组件目录以保存组件，然后创建一个名为search - bar以用作搜索框组件的目录。

上面的组件实际上与页面非常相似，所有组件都由目录组成，因此显示的内容也由index.wxml编写。 因此，我将上一部分直接粘贴到搜索框中。

组件/搜索-粘贴到bar/index.wxml后，代码格式可能不是很好。右键单击文件内容中的空白空间或选择代码，然后单击“自动格式”的格式文档。

在这里，您需要注意，更改文件位置后，如果您对结构文件中的资源位置有参考，则需要检查更改的位置是否正确以供资源引用。 例如，在这里，我们将内容粘贴在component/search - bar/index.wxml下的页面/索引/index.wxml下。图像标签参考资产/图像下的文件。您需要确保新位置下的图像参考路径仍然有效。

类似地，粘贴先前编写的组件样式

这样，您可以完成组件的结构和样式的定义，但我不认为它是一个组件。此方法如下图所示。

首先，您需要这样做使用组件：TRUE将其声明为组件

接下来，您需要使用global方法component（）方法在index.js中注册组件。此方法的参数是对象，允许您定义类似于页面的各种内容。有关更多信息，请参见官方文档

组件的基本定义已完成，您可以使用组件。 请参阅此组件，以便您使用它。例如，在主页配置文件中声明了部署方法

如下：在此处，搜索- bar定义了组件标签名称，类似于要使用的APPLET的内置组件输入和图像，与以下内容相关的内容与组件的当前参考位置相关。查找此位置的方法与搜索图像标签中的图像位置相同。

在上面的组件参考声明之后，您可以在此过程中使用页面结构文件中的组件

。 如果汇编后会遇到错误，则可以检查代码是否确实有错误。另一方面，您可以通过重新启动开发人员工具（因为开发人员工具本身具有某些错误，有时甚至是奇怪的问题）

此外，我还根据开发人员工具设置中的个人开发习惯（例如AutoSave和代码promises）创建了一些自定义设置。

内容列表组件

引入了完全自定义的组件后，继续开发内容列表组件。

很明显，上述搜索输入框在内容列表中更为复杂，但是组件以相同的方式开发。只需遵循这些规则即可开发组件。

首先，创建四个组成组件的核心文件，如下所示：

接下来，通过index.wx编写ML和INDEX.WXSS以完成列表组件的元素定义。

它是一个列表，因此使用了迷你程序的循环遍历语法。有关本节的更多信息，请参阅官方研究文档。特定用途是：

接下来，定义由index.js组件收到的外部传入数据如下：接下来，我们将此组件介绍到主页并将其传递给实际数据列表。 用法是首先声明对index.json中的组件的引用，然后使用页面文件中使用引用时声明的标签名称。

在此处，数据传递给由声明属性定义的内容列表组件，并且数据是从主页内部定义的列表数据发送的。

数据和属性

本文解释了数据和属性之间的差异。数据用于在页面或组件中定义您自己的数据，但是只有此属性可用，因为该属性用于接收外部数据传递的数据。

例如，对于内容列表组件，传递实际列表数据是外部必要的，因此属性对应于自定义组件的参数。然后，外部使用该组件允许您通过组件声明的参数传递数据。

因此，您需要了解组件参数需要哪些数据结构。例如，此处定义的列表组件必须传递给数据列表，其中数据列表中的每个项目都包含正文和图像。因此，在主页上的列表数据中定义以下数据

您可以看到列表中的每个项目仅适合组件使用的数据结构。 当然

返回组件后，使用根据WX语法表示每个项目数据的项目字段访问和查看列表中的数据项。 内置标签图像模式参数也用于声明图像显示的大小和样式。

和一组样式，在下图中的下图中最终显示了页面上的效果。最后，我们预览了我们到目前为止对真实机器开发的微型程序的影响，并比较了Zhihu mini程序的主页，如下所示：

左侧是Zhihu Mini程序的主页，右侧是我们开发的Mini Mini程序。效果很好吗？

最后，让我们总结一下我们今天学到的东西。 实际上，您可以通过目录清楚地看到。今天，我们介绍了完成自定义组件开发的过程，如下所示：定义组件和声明组件数据传输。上述方法与上述页面开发方法结合使用，以提高我们的核心迷你计划开发技能。 然后，根据您自己的设计，您可以开发引起各种功能的小编程页面，并根据每个页面所携带的功能和特征开发一组自定义组件，从而实现灵活组合的效果。

用于编程相关的知识，开始编程！ 呢

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

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 教你如何在小程序中开发搜索输入框组件（小程序搜索框复制是什么意思）
• 如何在小程序中开发内容列表组件（如何做一个小程序项目）
• 手把手带你实现小程序中保存图片组件的功能。
• 教你如何在一个小程序中开发一个搜索输入框组件(小程序搜索框的简单实现)

本文由主机参考刊发，转载请注明：简单分析如何在迷你程序中开发内容列表组件（如何创建和开发迷你程序） https://zhujicankao.com/146163.html