前言
入門教程之列表渲染多層巢狀迴圈，目前官方的文件裡，主要是一維陣列列表渲染的案例，還是比較簡單單一，給剛入門的童鞋還是無從入手的感覺。
{{index}}: {{item.message}}
複製程式碼還有一個九九乘法表把資料直接寫到wxml裡的，並不是動態二維陣列的列表渲染。
{{i}} * {{j}} = {{i * j}}
複製程式碼那麼今天，我們主要來講講動態多維陣列和物件混合的列表渲染。
講解
何為多維陣列和物件混合，給個很簡單的例子
twoList:[{
id:1,
name:'應季鮮果',
count:1,
twodata:[{
'id':11,
'name':'雞脆骨'
},{
'id':12,
'name':'雞爪'
}]
},{
id:2,
name:'精緻糕點',
count:6,
twodata:[{
'id':13,
'name':'羔羊排骨一條'
},{
'id':14,
'name':'微辣'
}]
}]複製程式碼上述例子就是一個陣列，這都是我們日常開發過程中，經常會碰到的JSON格式，
該陣列的元素是有物件，物件又分為屬性，屬於陣列物件混合，可能對於剛接觸小程式的童鞋，碰到這種陣列物件混合的就會發難了。
一層迴圈
oneList:[{
id:1,
name:'應季鮮果',
count:1
},{
id:2,
name:'精緻糕點',
count:6
},{
id:3,
name:'全球美食烘培原料',
count:12
},{
id:4,
name:'無辣不歡生猛海鮮',
count:5
}]複製程式碼以上陣列物件混合JSON，是測試只有一層迴圈的，我們看看在wxml裡怎麼迴圈，我們先看一下要迴圈渲染到頁面上的效果圖。
{{index+1}}、{{item.name}}
複製程式碼我們可以看到，這裡直接用兩個花括號來給view 迴圈列表，注意強調一下，請記得一下要用 兩個花括號資料起來，如果不包起來，view也會迴圈出來，但並不是自己要迴圈的資料，而且是給了一個假象給你以為是有迴圈了，這裡開發工具有點坑人的感覺，這個還需要多細心點，這裡記住一點，只要是有資料的，就需要花括號。
另外預設陣列的當前項的下標變數名預設為index，陣列當前項的變數名預設為item，同時我這裡也順道演示瞭如何使用陣列變數名和下標。
二層迴圈
JSON程式碼
twoList:[{
id:1,
name:'應季鮮果',
count:1,
twodata:[{
'id':11,
'name':'雞脆骨'
},{
'id':12,
'name':'雞爪'
}]
},{
id:2,
name:'精緻糕點',
count:6,
twodata:[{
'id':13,
'name':'羔羊排骨一條'
},{
'id':14,
'name':'微辣'
}]
},{
id:3,
name:'全球美食烘培原料',
count:12,
twodata:[{
'id':15,
'name':'秋刀魚'
},{
'id':16,
'name':'錫箔紙金針菇'
}]
}]複製程式碼wxml程式碼
{{index+1}}、{{item.name}}
----{{twodata.name}}---{{item.name}}
複製程式碼以上截圖和程式碼是二層巢狀內容。
我們在wxml程式碼裡，很明顯的看到有兩個wx:for的控制屬性，在二層迴圈的JSON程式碼裡，我們看每個單陣列裡還有一級資料twodata，這裡是需要再迴圈渲染到頁面上的，在第一層資料裡，直接再迴圈item.twodata即可，請記得一定要帶上花括號。
在第二層的迴圈裡，建議把當前項的變數名改為其他，即在wxml程式碼裡看到的wx:for-item="twodata"，因為預設的當前項的變數名為item，如果不改換其他的話，你是拿不到第一層迴圈的資料的，因為被第二層的變數名覆蓋了。
所以我們在wxml程式碼裡，在第二層迴圈時，可以看到還可以迴圈第一層的值，即----{{twodata.name}}---{{item.name}}。
三層以上的多層迴圈
三層以上的多層的陣列迴圈，在原理上同二層迴圈是一樣的，能理解了二層陣列迴圈，對於三層以及三層以上都能得心應用的。
需要注意的地方，那就是老生常談的問題了，資料需要用花括號括起來，從第二層起，把預設的當前項的變數名改為其他，例如wx:for-item="twodata"，還有細心再細心。
wx:key唯一識別符號
為什麼會有wx:key的出現呢，官方給的解釋是，如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 input 中的輸入內容，switch 的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。
當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。
在開發過程中，wx:key的作用對於專案作用是非常大的，如果從文字上無法理解的童鞋，可以到github clone demo到微信開發工具裡，親自體驗下。
我們看到這個GIF動畫圖，這裡有一個switch的開啟狀態，switch的狀態是在標題為羔羊排骨一條的，在對這個陣列增加資料時，這個switch的狀態並不跟隨著羔羊排骨一條，並不保持自己的狀態。
那我們再看另一個例子，使用了wx:key唯一識別符號。
這個GIF動畫圖，也是點選開啟了switch的狀態，唯一有不同的地方，就是在新增資料時，是保持著自己的狀態的。
相信通過這兩個小例子，對wx:key唯一識別符號應該也有所瞭解啦，想要提升技術，就要多折騰，自己在小程式裡，寫個wx:for 和 wx:key 體會下。
還有一個需要注意的地方，我們先看看以下程式碼
複製程式碼wx:key="id"，我們看到wx:key裡的值並不需要花括號的，是的，這裡是比較特別的地方，不需要花括號，同時也不需要引數名，需要是雖然資料裡的一個欄位名。
結束語
今天我們講了列表渲染，官方給的文件還是比較簡單單一，我們這裡更深入的講了陣列的一層、二層以及多層迴圈，還有wx:key唯一識別符號的使用方法和注意事項。
相信在小程式推出公測之後，很多小夥伴都已經抓緊申請註冊小程式了。在開發階段中也碰到了很多的問題，例如wx.request資料請求不成功，在陣列操作時，不知道如何往陣列裡push資料，input如何監聽使用者輸入的狀態，css的background-image無法獲取本地資源等等，本部落格會出一個專題，給碰到這些問題的小夥伴解決思路。
demo github地址：
github.com/bluefox1688…
交流平臺
最近大家對微信小程式開發熱情大漲，結識了不少對微信小程式技術開發的牛人，也有一些剛入行的新手，特此我建立了一個微信小程式技術交流圈子，希望給大夥有一個純潔的技術交流圈子，技術交流，提升自我。我們也會不定期釋出一些微信小程式的學習教程。
此群的目標為純（幹）純（貨）的技術交流群，不死於廣告之中，已開啟了群主邀請確認機制。
需要入群的小夥伴，請加我的個人微信amwhuang。（備註：小程式入群）
文章首發地址：
列表渲染多層巢狀迴圈及wx:key的使用--微信小程式入門教程
lanchenglv.com/article/201…
如需轉載，請標明轉載出處，謝謝。