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

I_Am 發布于2019-08-21 15:01 / 2754人閱讀

摘要：在之前的教程中寫到，微信小程序框架將程序分為邏輯層文件和視圖層文件。關于數據綁定的更多講述，敬請期待微信小程序開發教程基礎篇數據綁定下

在之前的教程中寫到，微信小程序框架將程序分為邏輯層(.js文件)和視圖層(.wxml文件)。這是一種常見的UI和邏輯分離的程序設計方式，開發出來的程序更加靈活，易擴展。

這種程序設計方式通常要解決兩個問題:

UI層響應邏輯層邏輯和數據的變化
UI層將用戶的操作反饋到邏輯層

通常來說可以讓UI層和邏輯層互相暴露接口給對方，不過出于對靈活性和擴展性的考慮，會引入中間層來進行管理，這樣可以避免UI層和邏輯層之間的直接依賴。

微信小程序框架正是基于這種模式進行設計的，.wxml文件來描述UI層(微信官方名稱為視圖層，教程后續也將用視圖層來命名)，.js文件來處理邏輯層，而微信的框架則作為中間層管理兩者之間的調用。

為了更好的幫助開發者開發微信小程序，微信定義了一些語法和規則來幫助開發者連接視圖層和邏輯層。

數據綁定

顯示字符串內容

//page.wxml
{{motto}}

//page.js
 data: {
    motto: "Hello World",
  },

通過將"{{motto}}"嵌入視圖層代碼中，界面會顯示"Hello World"

更改字符串內容

setData({
  motto:"Hello My World"
  })

當執行上述代碼后，界面會顯示"Hello My World"

上述部分有兩點需要說明:

1: 視圖層嵌入的是{{motto}}而不是{{data.motto}}，微信框架默認設定視圖層綁定的變量定義在Page對象的data屬性中，也就是說，如果變量需要綁定到視圖層，一定要定義data屬性中

2: 通過調用Page對象的setData(Page對象預定義)方法，可以更新界面數據，但是直接設置變量是無效的，因此對于綁定到視圖層的變量，要永遠使用setData方法來設置變量值

顯示圖片
在開發工具默認生成的程序首頁，顯示了用戶的頭像，相關代碼如下:

//index.wxml
 

//index.js
onLoad: function () {
    console.log("onLoad")
    var that = **this**
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  }

image標簽的src屬性綁定了userInfo.avatarUrl變量，并在onLoad方法中通過調用setData方法設置userInfo。

屬性綁定

可以將變量綁定到視圖組件的屬性值上(如上面image標簽的src屬性)，注意在綁定到屬性時，需要在外面加入一對雙引號。

src="{{userInfo.avatarUrl}}"

除了用于顯示圖片外，屬性綁定還有許多作用。

關聯數據

假設要做一個學生管理程序，頁面使用列表來展示用戶數據，當用戶點擊某一學生信息時，進入該學生的詳情頁頁面。
當獲取到用戶的點擊事件時，必須要知道點擊的是哪一個學生的數據，這時可以將學生的id綁定到視圖組件的id屬性中來進行數據關聯。

控制視圖的隱藏/顯示

可以將變量綁定到視圖組件的hidden屬性中，通過更改組件hidden屬性的值，可以控制組件是否顯示。

控制屬性
上面說到可以通過屬性綁定的方法來控制視圖組件是否顯示，還可以通過控制屬性來實現這一功能。

//Page.wxml
 

//Page.js
Page({
  data: {
    condition: true
  }
})

通過綁定數據到wx:if屬性，可以控制該組件是否顯示。
框架還提供了wx:elif和wx:else屬性，用法如下:

 1 
 2 
 3

如果想同時控制多個視圖組件，可以使用block wx:if


   view1 
   view2

同樣，控制屬性綁定時也需要添加雙引號

wx:if vs hidden

一般來說，wx:if 有更高的切換消耗而 hidden 有更高的初始渲染消耗。因此，如果需要頻繁切換的情景下，用 hidden
更好，如果在運行時條件不大可能改變則 wx:if 較好。

關鍵字
框架提供了兩個關鍵字來表示真和假
true：boolean 類型的 true，代表真值。
false： boolean 類型的 false，代表假值。

代碼示例

特別注意：不要直接寫 checked="false"，其計算結果是一個字符串，轉成 boolean 類型后代表真值。

關于數據綁定的更多講述，敬請期待微信小程序開發教程(基礎篇)8-數據綁定下

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

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

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

微信小程序開發教程(基礎篇)3-app.js 解析

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

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

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

GT 2019-08-20 12:29 評論0 收藏0
微信小程序開發教程(基礎篇)6-logs頁面解析

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

shiguibiao 2019-08-20 12:34 評論0 收藏0
微信小程序開發教程(基礎篇)2-微信小程序結構概覽

摘要：在新建一個項目后，微信小程序會生成一個默認的程序框架，后續程序的開發工作都在這個框架上進行。微信小程序的開發模式確實和開發很相似。通常一個完整的微信小程序包含上面兩部分，當然我們也可以定義自己的目錄用于存放公共代碼和程序需要的其它文件。在上一篇教程的最后，我們生成了一個類似Hello World的小程序，這個過程中沒有編寫任何一行代碼。在新建一個項目后，微信小程序會生成一個默認的程序...

muddyway 2019-08-20 12:21 評論0 收藏0
微信小程序開發教程(基礎篇)8-數據綁定下

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

gaara 2019-08-20 13:33 評論0 收藏0