浅析如何在小程序中开发一个内容列表组件（小程序内常见的组件）

浅析如何在小程序中开发一个内容列表组件（小程序内常见的组件）

本篇文章给大家分享一个小程序开发实战，介绍一下怎么开发一个内容列表组件，希望对大家有所帮助！

程序员必备接口测试调试工具：立即使用Apipost = Postman + Swagger + Mock + Jmeter Api设计、调试、文档、自动化测试工具 后端、前端、测试，同时在线协作，内容实时同步

我们开发了一个首页常见的搜索输入框，但其代码是直接写在首页文件中的，所以这样还不能称为是一个组件。这篇我们来介绍一下如何编写一个完整的小程序组件。【相关学习推荐：小程序开发教程】

组件的组成

组件结构

首先，组件同页面类似，都有一个单独的文件夹进行维护。我们先在小程序项目中创建一个components目录用于存放我们的组件，然后创建一个名为search-bar的目录用来作为我们的搜索框组件。

上面提到，组件其实和页面很像，都由一个目录所组成，所以自然其要展示的内容也都由index.wxml进行编写。所以我们直接将之前关于搜索框的部分粘贴过来。

这里需要注意的是，如果我们的结构文件中如果有资源的位置引用，当修改文件位置后，要确认修改后的位置对于资源的引用是否正确。比如这里，我们将原本pages/index/index.wxml下的内容粘贴至components/search-bar/index.wxml，其中image标签引用了assets/images下的文件，需要确认新位置下的图片引用路径依然有效。

组件样式

同样地，我们将之前写好的组件样式也粘过来

其次，我们需要在index.js中使用全局方法Component()方法注册该组件，该方法的参数为一个对象，其中可以定义类似页面的各种内容，具体可参考 官方文档

组件使用

其中，"search-bar"定义的是该组件的标签名称，正如我们使用的小程序内置组件input、image一样，而后面的内容则对应该组件对于当前引用者的相对位置，这个位置的寻找方法同image标签中对于图片位置的寻找。

另外，我在开发者工具的设置中按照个人开发习惯进行了一些列自定义的设置，比如自动保存和代码缩进等，可供参考。

内容列表组件

那么介绍完一个完整的自定义组件组成后，我们接着来完成内容列表组件的开发。

内容列表显然要必上面的搜索输入框复杂一些，但对于组件的开发方式都一样，我们只需要按照这种规则进行组件的开发即可。

首先，我们创建好组成组件的4个核心文件如下，其中index.js和index.json同之前写过的一样。

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

既然是列表，那么就会用到小程序中的循环遍历语法，关于这部分可参考 官方文档 进行学习，具体使用如下。

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

data和properties

这里我们讲一下data和properties有什么不同，data是用于定义页面或组件内部自己的数据的，而properties是用于接收外部传入的数据的，所以只有组件才有这个属性。

数据传入

因此，我们需要了解一下组件参数所需要的数据结构是怎样的，比如这里我们定义的列表组件需要传入一个数据列表，而数据列表中的每一项都包含正文和图片，所以我们在首页的listData定义如下数据

可以看到，列表的每一项要正好符合我们组件所使用的数据结构，即每个数据项都有text字段用于展示正文内容，并且有image字段用于展示正文的配图。

并通过一系列样式的编写

最终使得页面展现出的效果如下图所示

最后，我们通过真机预览一下我们截止目前开发的小程序效果，并对比知乎小程序的首页如下。

左侧为知乎小程序的首页，右侧为我们自行开发的小程序，效果是不是还不错。

总结

最后，我们总结一下今天学习了哪些内容。其实通过目录可以清晰地看到，今天我们介绍了一个自定义组件开发的完成过程如下

通过如上方法，结合之前所讲的页面开发方法，我们完善了小程序开发的核心技能。之后，我们可以按照自己的设计，开发负责不同功能的小程序页面，并且根据各个页面所承载的功能及特点，开发一系列自定义组件，来达到可以灵活组合的效果。

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

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。