微信小程序開發教程(基礎篇)8-數據綁定下

gaara 發布于2019-08-20 13:33 / 2511人閱讀

摘要：教程接上篇，當需要展示一組數據時，可以使用其中是當前數據索引的默認變量名，是當前數據項的默認變量名。保留關鍵字代表在循環中的本身，這種表示需要本身是一個唯一的字符串或者數字，上面引用自微信官方教程。

教程接上篇，當需要展示一組數據時，可以使用wx:for

//.wxml

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


//.js
age({
  data: {
    array: [{
      message: "foo",
    }, {
      message: "bar"
    }]
  }
})

其中index是當前數據索引的默認變量名，item是當前數據項的默認變量名。
也可以使用 wx:for-item 和 wx:for-index 來指定別名


  {{idx}}: {{itemName.message}}

也可以嵌套使用，如下面是一個九九乘法表


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

類似block wx:if，也可以將wx:for用在標簽上，以渲染一個包含多節點的結構塊


   {{index}}: 
   {{item}}

wx:key

要理解為什么需要wx:key，先來看一個例子:

//.wxml
 {{item.name}} 


//.js
Page({
  data: {
    objectArray: [
      {id: 1, name: "我沒有被選中"},
      {id: 2, name: "我沒有被選中"},
    ],
  },
 
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length, name: "我沒有被選中"}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
})

上面的代碼創建了兩個checkbox組件和一個按鈕，當點擊按鈕會在最上方新增一個checkbox組件。
編譯代碼，會顯示如下界面:

點擊按鈕，界面如下：

ok，到這里一切正常，為了更好的說明問題，加入checkbox選中事件的處理，當checkbox被選中時，將文字修改為"我被選中了"，相關代碼如下：

//wxml

   {{item.name}} 
  




//js
Page({
  data: {
    objectArray: [
      {id: 1, name: "我沒有被選中"},
      {id: 2, name: "我沒有被選中"},
    ],
  },
 
  addToFront: function(e) {
    const length = this.data.objectArray.length
    this.data.objectArray = [{id: length + 1, name: "我沒有被選中"}].concat(this.data.objectArray)
    this.setData({
      objectArray: this.data.objectArray
    })
  },
  checkboxChange: function(e){
    console.log("checkboxChange")
    const length = this.data.objectArray.length
    let checkBoxArray = this.data.objectArray
    for (let i = 0; i < length; i++) {
       let ischecked = false
       for (let j = 0; j < e.detail.value.length; j++){
          if (checkBoxArray[i].id == e.detail.value[j]){
              checkBoxArray[i].name = "我被選中了"
              ischecked = true
          }
       }
       if (!ischecked){
         checkBoxArray[i].name = "我沒有被選中"
       }
    }
    this.setData({
      objectArray: this.data.objectArray
    })
  }
})

當選中第一個checkbox時，界面如下

這時如果點擊添加組件按鈕會怎樣呢，期望的效果應該如下

然而實際效果確是下圖這樣的

可以看到渲染引擎并沒有將選中的效果和數據綁定起來，導致出現了預期之外的結果。如果想要達到預期效果，就要使用wx:key


   {{item.name}}

將.wxml文件修改為上述代碼所示，就可以實現預期效果，重點就在 wx:key = "id" 這一句

如果列表中項目的位置會動態改變或者有新的項目添加到列表中，并且希望列表中的項目保持自己的特征和狀態（如
中的輸入內容，的選中狀態），需要使用 wx:key 來指定列表中項目的唯一的標識符。

wx:key 的值以兩種形式提供
1 字符串，代表在 for 循環的 array 中 item 的某個 property，該 property的值需要是列表中唯一的字符串或數字，且不能動態改變。
2 保留關鍵字 *this 代表在 for 循環中的 item 本身，這種表示需要item 本身是一個唯一的字符串或者數字，

上面引用自微信官方教程。除了用于保持視圖組件的狀態外，使用wx:key還有助于提高渲染效率

當數據改變觸發渲染層重新渲染的時候，會校正帶有 key的組件，框架會確保他們被重新排序，而不是重新創建，以確保使組件保持自身的狀態，并且提高列表渲染時的效率。

云服務器 GPU云服務器購物微信小程序開發視頻教程微信小程序開發微信小程序開發語言微信小程序開發免費

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81104.html

微信小程序開發教程(基礎篇)7-數據綁定上

摘要：在之前的教程中寫到，微信小程序框架將程序分為邏輯層文件和視圖層文件。關于數據綁定的更多講述，敬請期待微信小程序開發教程基礎篇數據綁定下在之前的教程中寫到，微信小程序框架將程序分為邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見的UI和邏輯分離的程序設計方式，開發出來的程序更加靈活，易擴展。這種程序設計方式通常要解決兩個問題: UI層響應邏輯層邏輯和數據的變化UI層將用戶...

I_Am 2019-08-21 15:01 評論0 收藏0
微信小程序開發教程(基礎篇)6-logs頁面解析

摘要：到此為止，默認生成程序的解析部分就結束了。這個解析過程是為了對微信小程序有個總體上的理解，所以很多地方并沒有深入。在后面的教程中，我會繼續講解微信小程序開發的各個方面。上一篇教程中對index頁面進行了解析，這一篇來解析下logs頁面老規矩先上圖 showImg(https://segmentfault.com/img/remote/1460000007613022?w=378&h...

shiguibiao 2019-08-20 12:34 評論0 收藏0
微信小程序開發教程(基礎篇)5-index 頁面解析

摘要：上一篇教程談了些和微信小程序開發本身無關的技術問題，現在回到主題。這邊教程主要對默認生成的頁面進行講解。而的顯示則是由屬性直接指定。在該例子中，當用戶點擊用戶頭像和昵稱的視圖區域時，程序便會顯示頁面。上一篇教程談了些和微信小程序開發本身無關的技術問題，現在回到主題。這邊教程主要對默認生成的index 頁面進行講解。在之前的教程中有寫道，每一個頁面都包含.js(處理邏輯)，.wxml...

GT 2019-08-20 12:29 評論0 收藏0
微信小程序開發小總結

摘要：框架這部分是小程序開發的核心，小程序采用視圖和邏輯層代碼相分離的結構，如果你用過這部分也不難理解，但是也有一些區別。工具這部分沒有什么好說的，微信開發開始還是用微信自己的開發工具比較方便。小程序開發文檔使用說明小程序的文檔分為簡易教程、框架、組件、API?、工具https://developers.weixin.qq.... 簡易教程---介紹小程序開發的一些基本情況開發方式...

niuxiaowei111 2019-08-23 10:28 評論0 收藏0
微信小程序開發教程(基礎篇)3-app.js 解析

摘要：微信小程序框架提供了一系列來幫助我們進行本地數據存儲，上面的代碼中使用到了和兩個更多相關可以參考這里方法很容易理解，會執行獲取用戶信息的功能。上一篇教程中寫道，開發工具會生成一個默認的程序框架，其中程序的主流程代碼包含在app.js中。默認實現中，該部分功能比較簡單，不過對于學研究小程序開發還是比較有價值的。由于代碼行數不多，下面一次性貼出來后進行講解 //app.js App({...

lemon 2019-08-20 12:23 評論0 收藏0