模板语法 WXML（WeiXin Markup Language）是框架设计的?套标签语?，结合基础组件、事件系统，可以构 建出??的结构。
1. 数据绑定
1.1. 普通写法
{{ message }}
Page({
data: {
message: 'Hello MINA!'
}
})
1.2. 组件属性
Page({
data: {
id: 0
}
})
1.3. bool类型
不要直接写 checked=“false”，其计算结果是?个字符串
2.运算
2.1. 三元运算
Hidden
2.2. 算数运算
{{a + b}} + {{c}} + d
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
2.3. 逻辑判断
2.4. 字符串运算
{{"hello" + name}}
Page({
data:{
name: 'MINA'
}
})
2.5. 注意
花括号和引号之间如果有空格，将最终被解析成为字符串
3. 列表渲染
3.1. wx:for
项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key ?来提?数组渲染的性能
wx:key 绑定的值 有如下选择
- string 类型，表? 循环项中的唯?属性 如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
- 保留字 *this ，它的意思是 item 本? ，*this 代表的必须是 唯?的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
代码：
{{index}}: {{item.message}}
Page({
data: {
array: [{
id:0,
message: 'foo',
}, {
id:1,
message: 'bar'
}]
}
})
3.2. block
渲染?个包含多节点的结构块 block最终不会变成真正的dom元素
{{index}}:
{{item}}
4. 条件渲染
4.1. wx:if
在框架中，使?
wx:if="{{condition}}" 来判断是否需要渲染该代码块： 1
2
3
4.2. hidden
True
类似 wx:if
频繁切换 ? hidden
不常使? ? wx:if
【微信小程序|微信小程序从入门到入土教程(02)】未完待续…
推荐阅读
- 小程序|【视频倒放神器】超级玩法（千万不要倒放视频，太魔性了根本停不下来......）
- 小程序|最难忘的新年祝福，第一个让大家都惊喜的小程序（有趣、恶搞、好玩）
- 小程序|【自制壁纸生成器】2022新年壁纸领取，换一张手机壁纸，迎接2022叭~
- 白皮书|阿拉丁指数丨《2021 年度小程序互联网发展白皮书》4.5 亿+DAU 小程序的 6 大发展趋势
- 学习笔记|uni-app开发小程序
- 微信小程序的广告方式有哪些
- 公众号关联微信小程序功能介绍
- 微信小程序地址位置定位wx.getLocation 4G 与WIFI 不一致
- C#|微信小程序开发系列（六）——“处理请求时出错”怎么处理（）