1. 定义数据
在小程序中，我们的数据都是定义在.js文件中。具体位置，如下：
Page({
data: {
text: 'jack',
},
onLoad: function () {
}
})
2. 关联到view
当我们在data:{......}中定义好数据后，主要是通过{{}}在.wxml文件中进行引用。
<text bindtap='onClick'> hello {{text}} ！</text>
上面的代码最终的结果: hello jack !
3. 数组的操作
- 在
data中定义数组：
data: {
array: [{
id: 1,
data: "hello"
},
{
id: 2,
data: "world"
},
{
id: 3,
data: "你好"
},
{
id: 4,
data: "世界"
}
],
}
- 在
wxml中调用：
<view>
<text>{{array[0].id+"---"+array[0].data}}</text>
</view>
最终的结果：1---hello
4. 条件判断
在.wxml文件中，我们可以直接通过wx:if、wx:else等判断条件，对UI渲染出不同的效果。
<block wx:if='{{used}}'>
<text class='red'>我是红色</text>
</block>
<block wx:else>
<text class='blue'>我是蓝色</text>
</block>
这段代码里，当used=true时显示我是红色，当used=false时显示我是蓝色。
<block>并不是控件，仅仅是一个包装元素，不在页面中做渲染，仅仅接受控制属性。所以下面这种写法效果也是一致的。
<text wx:if='{{used}}' class='red'>我是红色</text>
<text wx:else class='blue'>我是蓝色</text>
个人推荐第二种写法，感觉代码看起来更简洁。
4. 列表
4.1 遍历列表
很多时候，我们的页面中，会有列表的展示。这种情况，我们可以使用wx:for来进行遍历：
<view class='array_view' wx:for='{{array}}'>
<text class='text_item'>{{item.data}}</text>
</view>
上面的代码，执行之后的结果如下：
Snip20181030_1.png
4.2 列表模板
- 创建一个template目录，专门用于存放模板文件
- 在template目录下，创建一个
.wxml用于描述模板UI
<template name='user'>
<view class='item_user'>
<text class='title'>用户资料：</text>
<view class='user_info'>
<text class='text'>姓名:{{name}}</text>
<text class='text'>性别:{{gender}}</text>
<text class='text2'>年龄:{{age}}</text>
</view>
</view>
</template>
这里的name用于标识当前模板
- 在template目录下，创建
.wxss文件用于存放模板所用样式
.item_user {
display: flex;
flex-direction: column;
}
.title {
font-size: 40rpx;
color: black;
}
.user_info {
width: 100%;
display: flex;
padding-left: 20rpx;
flex-direction: column;
background-color: #ff9e2e;
}
.text,
.text2 {
height: 50rpx;
font-size: 30rpx;
line-height: 50rpx;
border-bottom: 1rpx solid grey;
}
.text2 {
border-bottom: 0;
}
- 在目标
.wxml文件中，导入模板UI，并引用
<!-- 导入模板UI -->
<import src='../../template/user.wxml' />
.......
<block wx:for='{{userList}}'>
<template is='user' data='{{...item}}'></template>
</block>
- 在目标
.wxss文件中，导入模板样式文件
@import "../../template/user.wxss";
- 在目标
.js文件中，创建数据
userList: [{
name: "李磊",
gender: "男",
age: 22
}, {
name: "韩梅梅",
gender: "女",
age: 20
}, {
name: "lily",
gender: "女",
age: 19
}],
这样整个列表模板展示就完成了，最终效果如下：
Snip20181030_2.png
