微信小程式之視圖層WXML綁定資料、模板、邏...

前篇文章介紹了小程式的MVC結構：

page.js 即控制層（C），也叫業務邏輯層；

##page.js 中的data屬性，即資料模型層（M）；

page.wxml 即展現層（V）；

page.wxss 即css，增強展現層效果。

透過業務邏輯層（C），修改data屬性（M），從而在展現層（V）中展示。

即MVC設計模式。

一、資料綁定

#先來看看Page頁面的MVC 流程結構圖

如果在data 中定義了某個變量，例如

Page({
    data:{
        title: '小程序实战教程',
        desc: '视图层—WXML'
    }
})

在頁面中透過{{title}}，即可展示效果，如下動圖：

#二、資料綁定常用語法

2.1，內容

#89c662c6f8b87e82add978948dc499d2 {{ message }} de5f4c1163741e920c998275338d29b2

#2.2，元件屬性(需要在雙引號內)

#和內容一樣

aaba81a7d774e6c2302573fd72615d5d de5f4c1163741e920c998275338d29b2

2.3，控制屬性

< ;view wx:if="{{condition}}"> de5f4c1163741e920c998275338d29b2

2.4，關鍵字(需要{{ } }內)

true：boolean 類型的true，代表真值。

false： boolean 類型的 false，代表假值。

747f72a358121e7e841b6400bb3b0b1a 05746d9ee125ce13a8db285d2e718246

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

2.5，三元運算c0dc69f695518309bed4bf463f5a1280 Hidden de5f4c1163741e920c998275338d29b2

#2.6，算數運算89c662c6f8b87e82add978948dc499d2 {{a + b}} + { {c}} + d de5f4c1163741e920c998275338d29b2

#2.7，字串運算89c662c6f8b87e82add978948dc499d2{{" hello" + name}}de5f4c1163741e920c998275338d29b2

#2.8，資料路徑運算

#對於object類型，可以透過object.key取得值；

對於array類型，可以透過下標index取得值，index從0開始

89c662c6f8b87e82add978948dc499d2{{object. key}} {{array[0]}}de5f4c1163741e920c998275338d29b2

程式碼與效果圖：

##

#三、邏輯渲染語法
#3.1，邏輯判斷wx:if
2428c98322da0786c26d2124ea16d07a 5}}"> de5f4c1163741e920c998275338d29b2

#或

2428c98322da0786c26d2124ea16d07a 5}}"> 1 de5f4c1163741e920c998275338d29b2
0164e52f109e972e49b2f115709300d2 2}} "> 2 de5f4c1163741e920c998275338d29b2
a299c6007f65540f8bfc71911785b662 3 de5f4c1163741e920c998275338d29b2

block wx:if

f18182654dad930a0dbecb3c65defe3f
  89c662c6f8b87e82add978948dc499d2 view1 de5f4c1163741e920c998275338d29b2
  89c662c6f8b87e82add978948dc499d2 view2 < ;/view>
36b196a5d42bcd29e331cb722979f9a6

#3.2，wx:for

##預設陣列的當前項目的下標變數名稱預設為index，陣列目前項目的變數名稱預設為item 。也可以透過 wx:for-index 和 wx:for-item 指定。

5c869cda098bfe168fa00e4ec7260a82

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

指定

b2dec1a2f6f23ad833da9e35363aa954

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

#block wx:for

992e0b80b16e293b90f2ddd5facc6985

  89c662c6f8b87e82add978948dc499d2 {{ index}}: de5f4c1163741e920c998275338d29b2
  89c662c6f8b87e82add978948dc499d2 {{item}} de5f4c1163741e920c998275338d29b2
36b196a5d42bcd29e331cb722979f9a6

#3.3，wx:key

如果清單中項目的位置會動態改變或有新的項目加入清單中，並且希望清單中的項目保持自己的特徵和狀態（如< ;input/> 中的輸入內容，698d939a2c9041f2302734cfeb04788e 的選取狀態），需要使用wx:key 來指定清單中項目的唯一的識別碼。

wx:key 的值以兩種形式提供

1）字串，代表在for 迴圈的array 中item 的某個property，該property 的值需要是列表中唯一的字串或數字，且不能動態改變。

2）保留關鍵字*this 代表在for 迴圈中的item 本身，這種表示需要item 本身是一個唯一的字串或數字

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

4efbab812d8ae77ecae34dc98dd67a03 {{item. id}} 4cfc40e017beed9e13939e19a179680a

#見圖

######################################################################### ########################

四、模板

WXML提供模板（template），在不同的地方呼叫。實現復用的效果。

透過dcdc0fa59b5fea5bdae0d810c3919fcd標籤：

##定義範本

使用name屬性，作為模板的名字。然後在dcdc0fa59b5fea5bdae0d810c3919fcd內定義程式碼片段。

使用模板

使用 is 屬性，宣告所需的使用的模板，然後將模板所需的 data 傳入。

程式碼如下：

#定義範本

5a18ce5877a3f2c9ea30dea7b9418106

  89c662c6f8b87e82add978948dc499d2
    28f128881ce1cdc57a572953e91f7d0f {{name}}: {{time}} 273e21371c5d5e701d3c98517a0bfa41
  de5f4c1163741e920c998275338d29b2
#21c97d3a051048b8e55e3c8f199a54b2
  de5f4c1163741e920c998275338d29b2
#21c97d3a051048b8e55e3c8f199a54b2

使用範本(透過...將物件展開)

6d6d9088d69e7f145d664b900057c448

註：

#1）is 屬性可以使用Mustache 語法，來動態決定具體需要渲染哪個範本

2）模板擁有自己的作用域，只能使用data傳入的資料。

#五、資料組合

也可以在Mustache 內直接進行組合，構成新的物件或陣列。

data:{

        tplItem:{
            name:'我的範本',
     # 

}

陣列

a8ee55f2d0670b602d4eabef11d1ad2c {{item}} de5f4c1163741e920c998275338d29b2

#物件

f263b22c5e2723a694cd9d5e8aa7f5e2

21c97d3a051048b8e55e3c8f199a54b2

也可以用擴充運算子... 將一個物件展開。

就是展開屬性，新加的屬性 （如time:2016-11-20)，會覆寫tplItem的time。

cd6639d94ecc90523bf16797f2112208

21c97d3a051048b8e55e3c8f199a54b2

#

更多微信小程式之視圖層WXML綁定資料、模板、邏... 相關文章請關注PHP中文網！