视图层
框架的视图层由 WXML 与 WXSS 编写,由组件来进行展示。
将逻辑层的数据反应成视图,同时将视图层的事件发送给逻辑层。
WXML(WeiXin Markup language) 用于描述页面的结构。
WXS(WeiXin Script) 是小程序的一套脚本语言,结合WXML
,可以构建出页面的结构。
WXSS(WeiXin Style Sheet) 用于描述页面的样式。
组件(Component)是视图的基本组成单元。
WXML能力
列表渲染
在前面我们在介绍数组时演示了列表,在这一章我们会更加详细的来查看
1. wx:for
在组件上使用wx:for
来绑定数组, 之后我们就可以使用数组中的数据来重复渲染该组件,
默认数组的下标名为 index
, 数组当前项的变量名默认为 item
而我们可以通过 wx:for-item
和 wx:for-index
来决定数组中当前元素的当前的变量名,和下标的变量名 ,我们做个测试
index.wxml
<view wx:for="{
{
array.arrays}}"
wx:for-index="i" wx:for-item="obj">
{
{
i}} : {
{
obj.msg}}
</view>
index.js 的data域部分
array: {
arrays: [{
id: "1",
msg: "foo"
}, {
id: "2",
msg: "bar"
}]
}
运行效果 :
当然wx:for 可以嵌套,但是建议使用wx:for-index指定下标名,方便我们使用
2. block wx:for
指我们可以将 wx:for 用在 block标签上, 以渲染一个包含多个节点的结构块
这么说似乎看不出为什么用这个,假如以后我们要做一个外卖的小程序, 我们如何显现我们的每一个菜,我们肯定要做好看,假如要是做的难看,我估计菜再好吃,再优惠估计用的人也不多, 而且人也很容易被抢走,是吧,那么我们如何去定制呢, 这个时候women有两种方法 第一种是使用 模板 template
,第二种就是使用这个,其实用多了我们会发现写着其实都差不多,但是具体的区别我也不知道,比如运行速度占用资源什么的
我们将上面的优化下,并将 id 加入
index.wxml
<block wx:for="{
{
array.arrays}}