概述:本文主要描述微信小程序開發(fā)過程中 wx:if和wx:for的用法,順帶展示二者連用的坑;
一.基本使用:
1.1 條件渲染wx:if
在框架中，我們用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 來添加一個 else 塊：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if :
因為 wx:if 是一個控制屬性，需要將它添加到一個標(biāo)簽上。但是如果我們想一次性判斷多個組件標(biāo)簽，我們可以使用一個 <block/> 標(biāo)簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性。
<block wx:if="{{true}}">
<!--條件渲染內(nèi)容-->
<view> view1 </view>
<view> view2 </view>
</block>
注意： <block/> 并不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
wx:if vs hidden:
因為 wx:if 之中的模板也可能包含數(shù)據(jù)綁定，所有當(dāng) wx:if 的條件值切換時，框架有一個局部渲染的過程，因為它會確保條件塊在切換時銷毀或重新渲染。
同時 wx:if 也是惰性的，如果在初始渲染條件為 false，框架什么也不做，在條件第一次變成真的時候才開始局部渲染。
相比之下，hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
1.2 列表渲染wx:for
在組件上使用 wx:for 控制屬性綁定一個數(shù)組，即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
默認數(shù)組的當(dāng)前項的下標(biāo)變量名默認為 index，數(shù)組當(dāng)前項的變量名默認為 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名
使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名：
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
wx:for 也可以嵌套，下邊是一個九九乘法表
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
<view wx:if="{{i <= j}}">
{{i}} * {{j}} = {{i * j}}
</view>
</view>
</view>
block wx:for
類似block wx:if，也可以將 wx:for 用在<block/>標(biāo)簽上，以渲染一個包含多節(jié)點的結(jié)構(gòu)塊。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
wx:key
如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態(tài)（如 <input/> 中的輸入內(nèi)容，<switch/> 的選中狀態(tài)），需要使用 wx:key 來指定列表中項目的唯一的標(biāo)識符。
wx:key 的值以兩種形式提供
1.字符串，代表在 for 循環(huán)的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字符串或數(shù)字，且不能動態(tài)改變。
2.保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身，這種表示需要 item 本身是一個唯一的字符串或者數(shù)字，如：
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候，會校正帶有 key 的組件，框架會確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時的效率。
如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態(tài)，或者不必關(guān)注其順序，可以選擇忽略。
示例代碼：
<switch wx:for="{{objectArray}}" wx:key="unique" style="display: block;"> {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" style="display: block;"> {{item}} </switch>
<button bindtap="addNumberToFront"> Add to the front </button>
Page({
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
switch: function(e) {
const length = this.data.objectArray.length
for (let i = 0; i < length; ++i) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
}
this.setData({
objectArray: this.data.objectArray
})
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})
!!!注意：當(dāng) wx:for 的值為字符串時，會將字符串解析成字符串?dāng)?shù)組
<view wx:for="array">
{{item}}
</view>
```
等同于
```
<view wx:for="{{['a','r','r','a','y']}}">
{{item}}
</view>
```
注意： 花括號和引號之間如果有空格，將最終被解析成為字符串
```
<view wx:for="{{[1,2,3]}} "> <!--注意右引號左邊的空格-->
{{item}}
</view>
```
等同于
```
<view wx:for="{{[1,2,3] + ' '}}" >
{{item}}
</view>
```
##***二.wx:if 和 wx:for 聯(lián)用的坑:***
***2.1實現(xiàn)效果:簡單地列表(tableView(iOS),listView(andro))嵌套***
***2.2 JS數(shù)據(jù)結(jié)構(gòu):***
```
list:[{
id:'1',
title:'接口',
imageSource:'green_tri.png',
span: true,
sublist:[
{
id: '2',
title: '文檔',
},
{
id: '2',
title: '文檔',
},
{
id: '2',
title: '文檔',
},
]
},
{
id: '2',
title: '文檔',
imageSource: 'icon_API.png',
sublist: [
{
id: '2',
title: '文檔',
},
{
id: '2',
title: '文檔',
},
{
id: '2',
title: '文檔',
},
]
}, {
id: '3',
title: '百度',
imageSource: 'icon_API_HL.png',
sublist: [
{
id: '2',
title: '文檔',
},
{
id: '2',
title: '文檔',
},
{
id: '2',
title: '文檔',
},
]
}, {
id: '4',
title: '谷歌',
imageSource: 'icon_foot.png'
}, {
id: '5',
title: '高德',
imageSource: 'location.png'
}, {
id: '6',
title: '搜狐',
imageSource: 'trash.png'
}, {
id: '7',
title: '愛奇藝',
imageSource: 'wechat.png'
}, {
id: '8',
title: '騰訊',
imageSource: 'wechatHL.png'
}
]
},
```
***2.3 .wxml 代碼***
```
<view class="containtView">
<block wx:for="{{list}}" wx:key="title" >
<view id = "{{item.id}}" class="tableView" bindtap="selectedCell" >
<view class="titleView">{{item.title}}</view>
<image class="imageView" src="/pages/image/{{item.imageSource}}" mode="scaleToFill"></image>
</view>
<block wx:if="{{item.span}}" wx:for="{{item.sublist}}" wx:key="subtitle" >
<view class="titleView" bindlongtap="subCellSelected">{{item.title}}</view>
</block>
</block>
</view>
```
***2.4 代碼分析***
```
<!--注意這里的wx:if 和 wx:for -->
<block wx:if="{{item.span}}" wx:for="{{item.sublist}}" wx:key="subtitle" >
<view class="titleView" bindlongtap="subCellSelected">{{item.title}}</view>
</block>
```
-----
問題點: ```wx:if="{{item.span}}" ```此處的item 編譯器真的能正確區(qū)分其作用域嗎?事實是不行的!!! (意不意外,驚不驚喜?);事實上,上述代碼結(jié)果無法得到正確結(jié)果;
-----
正確寫法應(yīng)該如下:(給外層item 來個別名就好了)
```
<!--table.wxml-->
<view class="containtView">
<block wx:for="{{list}}" wx:key="title" wx:for-item="pitem" >
<view id = "{{pitem.id}}" class="tableView" bindtap="selectedCell" >
<view class="titleView">{{pitem.title}}</view>
<image class="imageView" src="/pages/image/{{pitem.imageSource}}" mode="scaleToFill"></image>
</view>
<block wx:if="{{pitem.span}}">
<block wx:for="{{pitem.sublist}}" wx:key="subtitle" >
<view class="titleView" bindlongtap="subCellSelected">{{item.title}}</view>
</block>
</block>
</block>
</view>
```
So,開發(fā)小程序,不要以常理視之,不要對編譯器要求太高了,事實上,小程序的編譯器對語法檢查很寬松;
#自己寫的太高端,編譯器會理解不了的!!!!!!!
