写在前面:
本文仅用于记录自己的学习经过和转载一些资料
本文所有练习和实例均使用vscode和微信官方的微信开发者工具共同完成,vscode仅用于编译代码。某些功能如即时模拟,实际上要使用微信官方工具才得以实现。
要达成代码同步,仅需要使用vscode和微信工具同时打开一个项目即可。
目录
三、模板语法
1、数据绑定
WXML的动态数据来自对应 Page 的 data设置,使用 Mustache 语法(双花括号)*数组是绑定不出来的:
<view> {{message}} </view>
wxml文件
var msg = "test"
//创建数据
Page({
data: {
msg
},
});
//载入数据
js文件
绑定的数据和普通的js语法一样,支持对象属性、表达式、布尔型等等。同时,在wxml端进行引用时,可以在元素内使用data-进行数据绑定,举例:
var msg = "hello,world!"
var num = 0330
Page({
data: {
msg,num
},
});
//用“,”分隔两个元素
js文件
<view data-num="{{num}}">
{{msg}}
</view>
//用data-进行标签数据绑定
wxml文件
wxml中可以使用data-num/data-isChecked等进行自定义属性绑定。总而言之,在属性中进行引用时,需要保证"{{}}"的完整性,不能缺失任何一个花括号{}或双引号""。而在属性外进行数据绑定时,不用加双引号"",如:
<view>
{{msg}}
</view>
除此之外,wxml的花括号也支持简单的表达式和逻辑运算,如
<view>
{{1+1}}
</view>
//四则运算
<view>
{{flag ? true : false}}
</view>
//三目运算
<view wx:if="{{length > 5}}">
{{msg}}
</view>
//逻辑判断
2、列表渲染
当循环项为数组时,关键字:
wx:for | 循环的数组 |
wx:for-item | 循环项的值 |
wx:for-index | 循环项的索引 |
wx:key | 循环项的唯一值,用于加速列表渲染 |
当然,此处的“循环项”指的是你在wxml中欲绑定的数据,并非指的是在js文件中创建的对象或数组
为三个循环属性举例:
var list = [1,2,3,4,5]
//创建数组对象
Page({
data: {
list
},
});
//绑定进page
js文件
<view>
<view wx:for="{{list}}"
wx:for-item="shape"
wx:for-index="index">
第{{index+1}}个数为:{{shape}}
</view>
</view>
wxml文件
但默认情况下,小程序会自动帮你创建的循环项名称(wx:for-item)和索引(wx:for-index)命名为item和index,所以若只有一层循环,可以省略以上关键字。
插入一个重点:使用wx:for时,需要注意:当数组是动态变化时,需使用wx:key关键字。同时注意:绑定一个普通的字符串时,那么这个字符串的名称(key)必须是对象里的唯一属性。(例如上述例子中的id/name)。故正确的写法应是:
<view>
<view wx:for="{{list}}"
wx:for-item="item"
wx:for-index="index"
wx:key="id">
第{{index+1}}个数为{{item}}
</view>
</view>
p.s.当你确认你的数组是静态时,可以不加key,无视报错。
*当对象数组本身就是一个唯一的字符串或者数字时,如[1,2,3,4,5]时可以用固定写法wk:key="*this",代表在for循环中的item自身。关于这点,可以在这里学习更详细的部分。
当循环项为对象时,关键字为
wx:for-item | 循环对象的该属性下的值(value) |
wx:for-index | 循环对象的属性(key) |
举例:
var list = {
job:"无用之人",
weapon:"鸡腿",
level:"1"
}
js文件
<view>
<view>艾尔登法环我的开荒选择是:</view>
<view wx:for="{{list}}"
wx:for-item="value"
wx:for-index="key"
wx:key="job">
{{key}}:{{value}}
</view>
</view>
wxml文件
模拟后的循环即为:
3、条件渲染
(1)wx:if
关键字 | 值 | 说明 |
---|---|---|
wx:if | true | 显示标签 |
false | 隐藏标签 | |
wx:elif | true | 显示标签 |
false | 隐藏标签 | |
wx:else | 显示标签 |
等价于一般代码中的 if / else if / else三种逻辑
(2)hidden
属性值 | 说明 |
---|---|
true | 隐藏标签 |
false | 显示标签 |
*关于hidde和wx:if的区别和使用时机:
属性 | 作用 | 使用时机 |
---|---|---|
wx:if | 将整个标签从页面结构直接移除 | 当标签并不需要频繁的切换显示,如关闭页面等等时使用 |
hidden | 通过添加样式(display)来修改标签样式,类似空白覆盖 | 当标签需要频繁的切换显示,如选中等等时使用 |
p.s.使用hidden时注意,style的权重比hidden高,不建议同时使用display属性和hidden