WXML
WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
数据绑定
WXML 中的动态数据均来自对应js文件中 Page 的 data。
数据绑定就是通过双大括号（{{ }}）将变量包起来，在wxml页面里将数据值显示出来。
简单绑定
<!--wxml--> <view> {{message}} </view>
// page.js Page({ data: { message: 'Hello MINA!' } })
组件属性绑定
它是将data 里的数据绑定到微信小程序的组件上。
<!--wxml--> <view id="item-{{id}}"></view>
// page.js Page({ data:{ id:0 } })
控制属性绑定
它用来进行if语句条件判断，如果条件满足，则执行，否则反之。
<!--wxml--> <view wx:if="{{condition}}"> </view>
Page({ data: { condition: true } })
关键字绑定
常用于组件的一些关键字
像复选框组件一样，checked 关键字如果为 TRUE，则代表复选框选中，如果等于FALSE，则代表不选中复选框。
<checkbox checked="{{false}}"> </checked>
条件渲染
wx:if 判断单个组件
判断是否需要喧染该代码块
<!--wxml--> <view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view> <view wx:elif="{{view == 'APP'}}"> APP </view> <view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js Page({ data: { view: 'MINA' } })
block wx:if判断多个组件
<block wx:if="{{true}}"> <view>flag1</view> <view>flag2</view> </block>
<block/>不是一个组件，他是一个包装元素，不会在页面做任何喧染，只接受控制属性。
<button bindtap="change_color">横条变色</button> <block wx:if="{{b==true}}"> <view class="bg_green"></view> </block> <block wx:elif="{{b==false}}"> <view class="bg_blue"></view> </block>
Page({ data:{ b:false }, change_color:function(){ var ab=this.data.b; this.setData({ b:!ab }) } })
.bg_green{ height: 100px; background-color: green; } .bg_blue{ height: 100px; background-color: blue; }
运算
三元运算
<view hidden ="{{flag? true:false}}">Hidden</view>
数学运算
<view>{{a+b}}+{{c}}+d</view>
Page({ data:{ a:1, b:2, c:3 } })
逻辑判断
<view wx:if="{{length>5}}"></view>
字符串运算
<view>{{"hello"+name}}</view>
Page({ data:{ name:'weixing' } })
数据路径运算
<view>{{object.key}}{{arr[0]}}</view>
Page({ data:{ object:{ key:'nihao' }, arr:['hello'] } })
列表渲染
wx:for 列表渲染单个组件
在组件上使用wx:for控制属性绑定一个数组，即可使用数组中的各项的数据重复渲染该组件。
<view wx:for="{{array}}"> {{index}}:{{item.message}} </view> 等价于 <view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName"> {{idx}}:{{itemName.message}} </view>
Page({ data:{ array:[ { message:'第0个元素' },{ message:'第1个元素' } ] } })
block wx:for列表渲染多个组件
<block wx:for="{{[1,2,3]}}"> <view>{{index}}:</view> <view>{{item}} </view> </block>
wx:key指定唯一标识符
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己得特征和状态,需要使用wx:for来指定列表中的项目的唯一标识符。
<input/>中输入的内容 <switch/>中选中的状态
<switch wx:for="{{objectArray}}" wx:key="unique">{{item.id}}</switch>
Page({ data:{ objectArray:[ {id:5,unique:"five"}, {id:4,unique:"four"}, {id:3,unique:"three"} ] } })
如果不提供wx:key,会有一个warning，如果明确知道该列表是静态的，或者不必关注其顺序，可以选择忽略。
