微信小程式之視圖層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，內容

# {{ message }}

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

#和內容一樣

2.3，控制屬性

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

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

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

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

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

2.5，三元運算

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

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

#2.8，資料路徑運算

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

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

{{object. key}} {{array[0]}}

程式碼與效果圖：

##

#三、邏輯渲染語法
#3.1，邏輯判斷wx:if

#或

1
2
3

block wx:if

   view1
   view2 < ;/view>

#3.2，wx:for

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

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

指定

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

#block wx:for

   {{ index}}:
   {{item}}

#3.3，wx:key

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

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

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

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

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

{{item. id}}

#見圖

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

四、模板

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

透過