我们之前的章节讲了数据绑定,数据驱动视图,这一节我们讲另一个核心:组件。
组件是什么?看看下面这张图
简单来说,组件就是组成视图层的组成单位,大到一个页面,小到一个按钮,都可以是一个组件。不要把组件想复杂了,
在小程序官方文档中有一栏是组件栏,专门展示了小程序封装的组件
上面的组件你看着是不是跟传统html
的标签一样呢? 现在的框架都实行组件化,那这些也就自然而然称为组件了,大家要习惯这个概念。
上面的图是一个列表,如果按照传统来看的话,红色框出来的都是一个组件,整个页面就是最大的组件了。我们看看代码吧
我们先创建一个文件夹,右键新建page,生成了四个文件,js,json,wxml,wxss
,此时app.json
中已全局配置好页面的文件路径。这部分前几章没有讲到,这里粗略的带过一下。
view
本身就是一个组件,还有image
组件,list_item
这一层又是由多个小组件组合成的大组件了。
看到上面的代码,有没发现,每一个list_item
的结构都是一样的,是不是可以简洁一下代码呢?这就要用到我们第3节讲到的wx:for
控制属性了,接下来就看看用了wx:for
后,代码有什么变化。
在data
中定义数据:
在组件上使用 wx:for
控制属性绑定list_data数组,即可使用数组中各项的数据重复渲染该组件
对比上一张图,这样代码简洁多了吧,以后只要有这种有数据重复的内容,都这么处理就对了。
小结一下,页面元素皆是组件,实战时,有合适的就用小程序封装好的组件,没有就用view
组件来组合使用,小程序没有封装或不符合项目使用的,就自定义组件(自定义组件,我在下一小节会详细讲解,我们是要写大项目的前端,自定义组件,不能不会啊!
欢迎有兴趣的朋友关注 "趣味web前端教程" 公众号,里面是写点前端的内容和大家分享学习的。