摘要：前言入門教程之列表渲染多層嵌套循環(huán)，目前官方的文檔里，主要是一維數(shù)組列表渲染的案例，還是比較簡(jiǎn)單單一，給剛?cè)腴T的童鞋還是無(wú)從入手的感覺(jué)。我們也會(huì)不定期發(fā)布一些微信小程序的學(xué)習(xí)教程。需要入群的小伙伴，請(qǐng)加我的個(gè)人微信。

入門教程之列表渲染多層嵌套循環(huán)，目前官方的文檔里，主要是一維數(shù)組列表渲染的案例，還是比較簡(jiǎn)單單一，給剛?cè)腴T的童鞋還是無(wú)從入手的感覺(jué)。

  {{index}}: {{item.message}}

還有一個(gè)九九乘法表把數(shù)據(jù)直接寫(xiě)到wxml里的，并不是動(dòng)態(tài)二維數(shù)組的列表渲染。

  
    
      {{i}} * {{j}} = {{i * j}}
    
  

那么今天，我們主要來(lái)講講動(dòng)態(tài)多維數(shù)組和對(duì)象混合的列表渲染。

何為多維數(shù)組和對(duì)象混合，給個(gè)很簡(jiǎn)單的例子

 twoList:[{
                id:1,
                name:"應(yīng)季鮮果",
                count:1,
                twodata:[{
                    "id":11,
                    "name":"雞脆骨"
                },{
                    "id":12,
                    "name":"雞爪"
                }]
        },{
                id:2,
                name:"精致糕點(diǎn)",
                count:6,
                twodata:[{
                    "id":13,
                    "name":"羔羊排骨一條"
                },{
                    "id":14,
                    "name":"微辣"
                }]
        }]

上述例子就是一個(gè)數(shù)組，這都是我們?nèi)粘ｉ_(kāi)發(fā)過(guò)程中，經(jīng)常會(huì)碰到的JSON格式，
該數(shù)組的元素是有對(duì)象，對(duì)象又分為屬性，屬于數(shù)組對(duì)象混合，可能對(duì)于剛接觸小程序的童鞋，碰到這種數(shù)組對(duì)象混合的就會(huì)發(fā)難了。

    oneList:[{
                id:1,
                name:"應(yīng)季鮮果",
                count:1
        },{
                id:2,
                name:"精致糕點(diǎn)",
                count:6
        },{
                id:3,
                name:"全球美食烘培原料",
                count:12
        },{
                id:4,
                name:"無(wú)辣不歡生猛海鮮",
                count:5
        }]

以上數(shù)組對(duì)象混合JSON，是測(cè)試只有一層循環(huán)的，我們看看在wxml里怎么循環(huán)，我們先看一下要循環(huán)渲染到頁(yè)面上的效果圖。

    {{index+1}}、{{item.name}}

我們可以看到，這里直接用兩個(gè)花括號(hào)來(lái)給view 循環(huán)列表，注意強(qiáng)調(diào)一下，請(qǐng)記得一下要用 兩個(gè)花括號(hào)數(shù)據(jù)起來(lái)，如果不包起來(lái)，view也會(huì)循環(huán)出來(lái)，但并不是自己要循環(huán)的數(shù)據(jù)，而且是給了一個(gè)假象給你以為是有循環(huán)了，這里開(kāi)發(fā)工具有點(diǎn)坑人的感覺(jué)，這個(gè)還需要多細(xì)心點(diǎn)，這里記住一點(diǎn)，只要是有數(shù)據(jù)的，就需要花括號(hào)。
另外默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為item，同時(shí)我這里也順道演示了如何使用數(shù)組變量名和下標(biāo)。

JSON代碼

        twoList:[{
                id:1,
                name:"應(yīng)季鮮果",
                count:1,
                twodata:[{
                    "id":11,
                    "name":"雞脆骨"
                },{
                    "id":12,
                    "name":"雞爪"
                }]
        },{
                id:2,
                name:"精致糕點(diǎn)",
                count:6,
                twodata:[{
                    "id":13,
                    "name":"羔羊排骨一條"
                },{
                    "id":14,
                    "name":"微辣"
                }]
        },{
                id:3,
                name:"全球美食烘培原料",
                count:12,
                twodata:[{
                    "id":15,
                    "name":"秋刀魚(yú)"
                },{
                    "id":16,
                    "name":"錫箔紙金針菇"
                }]
        }]

wxml代碼

        
            
                {{index+1}}、{{item.name}}
            
            
                ----{{twodata.name}}---{{item.name}}
            
        

以上截圖和代碼是二層嵌套內(nèi)容。
我們?cè)趙xml代碼里，很明顯的看到有兩個(gè)wx:for的控制屬性，在二層循環(huán)的JSON代碼里，我們看每個(gè)單數(shù)組里還有一級(jí)數(shù)據(jù)twodata，這里是需要再循環(huán)渲染到頁(yè)面上的，在第一層數(shù)據(jù)里，直接再循環(huán)item.twodata即可，請(qǐng)記得一定要帶上花括號(hào)。
在第二層的循環(huán)里，建議把當(dāng)前項(xiàng)的變量名改為其他，即在wxml代碼里看到的 wx:for-item="twodata"，因?yàn)槟J(rèn)的當(dāng)前項(xiàng)的變量名為item，如果不改換其他的話，你是拿不到第一層循環(huán)的數(shù)據(jù)的，因?yàn)楸坏诙拥淖兞棵采w了。
所以我們?cè)趙xml代碼里，在第二層循環(huán)時(shí)，可以看到還可以循環(huán)第一層的值，即----{{twodata.name}}---{{item.name}}。

三層以上的多層的數(shù)組循環(huán)，在原理上同二層循環(huán)是一樣的，能理解了二層數(shù)組循環(huán)，對(duì)于三層以及三層以上都能得心應(yīng)用的。
需要注意的地方，那就是老生常談的問(wèn)題了，數(shù)據(jù)需要用花括號(hào)括起來(lái)，從第二層起，把默認(rèn)的當(dāng)前項(xiàng)的變量名改為其他，例如 wx:for-item="twodata"，還有細(xì)心再細(xì)心。

為什么會(huì)有wx:key的出現(xiàn)呢，官方給的解釋是，如果列表中項(xiàng)目的位置會(huì)動(dòng)態(tài)改變或者有新的項(xiàng)目添加到列表中，并且希望列表中的項(xiàng)目保持自己的特征和狀態(tài)（如 input 中的輸入內(nèi)容，switch 的選中狀態(tài)），需要使用 wx:key 來(lái)指定列表中項(xiàng)目的唯一的標(biāo)識(shí)符。
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時(shí)候，會(huì)校正帶有 key 的組件，框架會(huì)確保他們被重新排序，而不是重新創(chuàng)建，以確保使組件保持自身的狀態(tài)，并且提高列表渲染時(shí)的效率。
在開(kāi)發(fā)過(guò)程中，wx:key的作用對(duì)于項(xiàng)目作用是非常大的，如果從文字上無(wú)法理解的童鞋，可以到github clone demo到微信開(kāi)發(fā)工具里，親自體驗(yàn)下。

我們看到這個(gè)GIF動(dòng)畫(huà)圖，這里有一個(gè)switch的開(kāi)啟狀態(tài)，switch的狀態(tài)是在標(biāo)題為羔羊排骨一條的，在對(duì)這個(gè)數(shù)組增加數(shù)據(jù)時(shí)，這個(gè)switch的狀態(tài)并不跟隨著羔羊排骨一條，并不保持自己的狀態(tài)。

那我們?cè)倏戳硪粋€(gè)例子，使用了wx:key唯一標(biāo)識(shí)符。

這個(gè)GIF動(dòng)畫(huà)圖，也是點(diǎn)擊開(kāi)啟了switch的狀態(tài)，唯一有不同的地方，就是在新增數(shù)據(jù)時(shí)，是保持著自己的狀態(tài)的。
相信通過(guò)這兩個(gè)小例子，對(duì)wx:key唯一標(biāo)識(shí)符應(yīng)該也有所了解啦，想要提升技術(shù)，就要多折騰，自己在小程序里，寫(xiě)個(gè)wx:for 和 wx:key 體會(huì)下。

還有一個(gè)需要注意的地方，我們先看看以下代碼

wx:key="id"，我們看到wx:key里的值并不需要花括號(hào)的，是的，這里是比較特別的地方，不需要花括號(hào)，同時(shí)也不需要參數(shù)名，需要是雖然數(shù)據(jù)里的一個(gè)字段名。

今天我們講了列表渲染，官方給的文檔還是比較簡(jiǎn)單單一，我們這里更深入的講了數(shù)組的一層、二層以及多層循環(huán)，還有wx:key唯一標(biāo)識(shí)符的使用方法和注意事項(xiàng)。

相信在小程序推出公測(cè)之后，很多小伙伴都已經(jīng)抓緊申請(qǐng)注冊(cè)小程序了。在開(kāi)發(fā)階段中也碰到了很多的問(wèn)題，例如wx.request數(shù)據(jù)請(qǐng)求不成功，在數(shù)組操作時(shí)，不知道如何往數(shù)組里push數(shù)據(jù)，input如何監(jiān)聽(tīng)用戶輸入的狀態(tài)，css的background-image無(wú)法獲取本地資源等等，本博客會(huì)出一個(gè)專題，給碰到這些問(wèn)題的小伙伴解決思路。

demo github地址：
https://github.com/bluefox168...

最近大家對(duì)微信小程序開(kāi)發(fā)熱情大漲，結(jié)識(shí)了不少對(duì)微信小程序技術(shù)開(kāi)發(fā)的牛人，也有一些剛?cè)胄械男率?，特此我建立了一個(gè)微信小程序技術(shù)交流圈子，希望給大伙有一個(gè)純潔的技術(shù)交流圈子，技術(shù)交流，提升自我。我們也會(huì)不定期發(fā)布一些微信小程序的學(xué)習(xí)教程。
此群的目標(biāo)為純（干）純（貨）的技術(shù)交流群，不死于廣告之中，已開(kāi)啟了群主邀請(qǐng)確認(rèn)機(jī)制。
需要入群的小伙伴，請(qǐng)加我的個(gè)人微信amwhuang。（備注：小程序入群）

文章首發(fā)地址：
列表渲染多層嵌套循環(huán)及wx:key的使用--微信小程序入門教程
http://lanchenglv.com/article...
如需轉(zhuǎn)載，請(qǐng)標(biāo)明轉(zhuǎn)載出處，謝謝。