边做边学入门微信小程序之仿豆瓣评分 (5)

WXML 中的动态数据均来自对应 Page 的 data，数据绑定使用 Mustache 语法（双大括号）将变量包起来，如：

<view wx:for=http://www.likecs.com/"{{count}}">
<text>{{stars}}</text>
</view>

页面渲染时，系统将去对应页面的js文件的data属性中寻找count和stars变量。

条件渲染

wx:if

在框架中，使用 wx:if="{{条件语句}}" 来判断是否需要渲染该代码块：

<image wx:if=http://www.likecs.com/"{{stars>30}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_whole.png' />

上条语句表示当满足stars>30的条件时，渲染image控件。

除了if条件外，还有wx:elif 和 wx:else语句：

<image wx:if=http://www.likecs.com/"{{stars>30}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_whole.png' />
<image wx:elif=http://www.likecs.com/"{{stars>20}}" src=http://www.likecs.com/'/images/ratingbar/star_fill_half.png' />
<image wx:else src=http://www.likecs.com/'/images/ratingbar/star_fill_none.png' />

wx:if 有且只有一个；

wx:elif 是else if的意思，可以有多个；

wx:else 最多只有一个。

系统按顺序判断各个条件，遇到成立的条件时则渲染该控件，其余控件则不会渲染。

注意：内部的条件语句的结果为{{false}}才表示条件不成立，不带{{}}的值将会被视为文本从而判定为条件成立。

<view wx:if=http://www.likecs.com/"{{false}}"/> <!--条件不成立-->
<view wx:if=http://www.likecs.com/"false"/> <!--条件成立-->
<view wx:if=http://www.likecs.com/"3"/> <!--条件成立-->
列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。数组长度为多少，就会重复渲染多少次。

<block wx:for=http://www.likecs.com/"{{count}}">
<text>{{index}}:{{item}}</text>
</block>

在循环时，当前项的变量名默认为 item，其下标变量名默认为 index。

<block wx:for=http://www.likecs.com/"{{count1}}">
<block wx:for=http://www.likecs.com/"{{count2}}">
<text>{{index}}:{{item}}</text>
</block>
</block>

如果遇到这种多重循环呢，如何在内部表示不同数组的当前项和下标呢？

可以用wx:for-item和wx:for-index分别指定当前项的变量名和下标的变量名：

<block wx:for=http://www.likecs.com/"{{count1}}" wx:for-item=http://www.likecs.com/"outer" wx:for-index=http://www.likecs.com/"i">
<block wx:for=http://www.likecs.com/"{{count2}}" wx:for-item=http://www.likecs.com/"inner" wx:for-index=http://www.likecs.com/"j">
<text>{{i}}:{{outer}}</text>
<text>{{j}}:{{inner}}</text>
</block>
</block>

数据绑定相关的知识大致了解了，我们打开ratingbar.js，并在data内定义两个变量：

// pages/movies/ratingbar/ratingbar.js
Page({
data: {
count:[3,5,6,8,9],
stars:16
}
})