WXML模板

本節(jié)學習目標

(1)了解wxml的基本概況和設計理念

(2) 掌握wxml語言的各種常用語法

(一)wxml是什么

wxml 是微信小程序團隊設計的一套標簽語言，可以構造出頁面的結構,類似html
借助wxml提供的組件我們可以實現文字的嵌入，圖片的嵌入，視頻的嵌入，各種能力的嵌入等等

(二)wxml語法規(guī)則

• 所有的元素都需要閉合標簽,類似
• 所有的元素都必須正確嵌套，符合層級關系
• 屬性值必須使用引號包圍
• 標簽必須使用小寫(雖然編輯器能識別，但是有的場合識別不出來)
• wxml中連續(xù)多個空格會被合并為1個空格

<text>Hello World</text>
<view><text>Hello World</text></view>
<text id="text1">myText</text>
<text>Hello       world</text> <!--渲染的時候會被處理成一個空格-->

• 由于某些屬性幾乎被所有的組件使用，所以這些屬性被抽離出來，形成組件的共同屬性

(三)wxml數據綁定

• 了解數據綁定的使用場景
• 掌握基本的數據綁定用法

數據綁定(雙向綁定)

用戶界面呈現會因為時刻不同，數據發(fā)生變化而有所不同，也會因為用戶操作發(fā)生了動態(tài)改變，這就要求程序的運行過程中，要有動態(tài)的去改變渲染界面的能力,從而達到更好的用戶體驗。

• wxml 的數據均來自對應的Page的data
• 數據綁定使用的是Mustache 語法(雙大括號)

<view>{{val1}}</view>
<view>{{val2}}</view>
<view>{{val3}}</view>
<view>{{val4}}</view>
在JS文件目錄中
Page({
  data:{
  var2: undefined,
  var3: null,
  var4: "var4"
 }
})
----------------------
渲染的結果就是:
null
var4
注意: 在小程序中沒有被定義或設置為undefined的變量不會被同步到wxml中去

(1)數據綁定之內容綁定

• 數據綁定區(qū)分大小寫

<text>{{demoText}}</text>
Page({
  data:{
    demoText:"Here is Demo Text"
   }
})
-------------
渲染的效果就是Here is Demo Text
特別注意: 內容綁定的參數是大小寫敏感的

(2)組件屬性綁定

• 組件屬性綁定: 可以實現動態(tài)屬性

 <view id="item-{{id}}"></view>
Page({
  data:{
    id:0
  }
})
--------------------
渲染結果:
<view id="item-0"></view>

• 借助動態(tài)屬性，可以實現如下操作
  (1) 動態(tài)樣式
  (2) 動態(tài)寬度
  (3) 動態(tài)長度
  (4) .....

(3) 邏輯語法

• 通過在{{}}內包含運算符進行簡單的計算
  (1) 三元運算符
  (2) 算數運算符
  (3) 字符串運算符
  (4) 路徑運算符

(1) 三元運算符

<view class="{{is_top?'top-cls':'sub-cls'}}">Hi</view>

(2) 算數運算

• 標簽內支持簡單的加減乘除

<view> {{a+b}}+{{c}}+d</view>
Page({
  data:{
    a:1,
    b:2,
    c:3
   }
})

(3)字符串運算

• 標簽內支持對字符串的操作

<view>{{"hello"+name}}</view>

Page({
  data:{
    name:"MIMI"
  }
})

(4) 數據路徑運算

• WXML支持對對象，數組，路徑操作，讀取內部的數據

<view>{{object.key}}
{{array[0]}}
</view>
--------------------
Page({
      data:{
         object:{
             key:"Hello"
            },
         array:['MiNA']
     }
})

(5)數據對象組合---數組

• WXML 可以在Mustache內進行數組的組合

 <view wx:for="{{[zero,1,2,3,4]}}">{{item}}</view>
------------------
Page({
   data:{
        zero:0
   }
})

(6) wxml 可以在雙括號內進行對象的組合

 <template is="objectCombine" data="{{for:a,bar:b}}"></template>
-------------------
Page({
          data:{
             a:1,
             b:2
          }
})
------------------
組1代碼組合后傳入的數據為{for:1,bar:2}

• 如果組合時，出現了相同的變量名，后面的變量會覆蓋前面的變量
• 花括號和引號之間如果有空格，空格最終將被解析為字符串

(四) 列表渲染

• 了解列表渲染的使用場景
• 掌握列表渲染的使用方法
• 學會wx:key的使用

列表渲染使用說明

• 列表渲染 : 將一個數組內的所有數據依次展示在界面上
• 常用場景：(1)文章列表 (2)商品列表
• 列表渲染示例：在組件的wx:for屬性上綁定一個數組，就可以使用數組中項目的值來重復渲染該組件
  示例

  <view wx:for="{{forText}}"wx:key="index">
     <view>{{index}}---{{item}}</view>
  </view>
------------------------
Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})

默認情況下,數組元素中當前項的下標變量名為index,當前項目值為item,必須要加上wx:key他表示獲取到的序號

• 在渲染時，可能會面臨要同時循環(huán)多個元素，那么可以使用輔助標簽block來循環(huán)

 <block wx:for="{{forText}}"wx:key="index">
     <view>這個就是序號:{{index}}</view>
     <view>這個就是值:{{item}}</view>
  </block>
------------------------
Page({
  data: {
    forText:[1,2,3,4,5,6]
  }
})

• 修改循環(huán)變量名

wx:for-index="自定義序號名稱", wx:for-item="自定義序號值"

  <block wx:for="{{forText}}" wx:key="index" wx:for-index="xuhao" wx:for-item="firstzhi">
    <view>這個就是序號:{{xuhao}}</view>
    <view>這個就是值:{{firstzhi}}</view>
  </block>

• wx:key用法

在未使用wx:key比如數據順序發(fā)生了變更，會改變數據的結構，導致重新渲染。要是使用了wx:key就會在原數據的情況下渲染數據。提升渲染效率。

(五) 條件渲染

• 了解條件渲染的使用場景
• 學習條件渲染的語法規(guī)則
• 明確wx:if和hidden的區(qū)別

(1) 條件渲染

在小程序的不同生命周期和不同的用戶操作情況下，可能需要為用戶展示和響應不同的內容，在這個時候，我們可以借助條件渲染來展示內容

• 控制單個組件的顯示

在組件上加入wx:if來控制組件的顯示和隱藏

<view wx:if="{{condition}}">
123</view>

當wx:if對應的值為true的時候，對應組件會進行渲染
當wx:if對應的值為false的時候，對應的組件不會進行渲染

• else 屬性

(1) wx:if 當進行條件判斷的時候，使用wx:if來進行初始的條件判斷，可單獨出現
(2) wx:else : 如果需要進行多種條件判斷結果使用wx:else 來輔助進行結果判斷
(3) wx:elif : 如果項目不止兩個判斷結果，使用wx:elif來輔助進行結果的輸出

示例:

 <view wx:if="{{length>5}}">
1
</view>
<view wx:elif="{{length>2}}">
2
</view>
<view wx:else>
3
</view>

• wx:if 和hidden區(qū)別

• wx:if 根據值來判斷組件是否需要渲染進入頁面

• hidden:始終都會進行渲染,但是會根據其值決定是否在頁面中展示
  如果組件的顯示切換頻繁，就用hidden,反之則使用wx:if

(六) 模板使用

• wxml提供了模板(template)，可以在模板中定義代碼片段，然后在不同的頁面調用

<template name="msgItem">
<view>
  <text>{{index}}:{{msg}}</text>
  <text>Time:{{time}}></text>
</view>
</template>

• 每個模板都需要一個name屬性，作為模板的名字
• template標簽內部包含的是具體的模板內容，標簽內借助雙大括號來進行數據綁定
• 使用模板

<template is="msgitem" data="{{...item}}">
----------
Page({
data:{
   item:{
     index:0,
     msg:"this is a template",
     time:"2016-09-15" 
    }
}
})

備注模板之間傳值可以用{{...xxxx}}這樣能把對象完全展開。

• wxml引用

wxml提供兩種引用方式: import 和include

(1) import 可以引入目標文件中的template,template以外的不會被引入，在當前文件中使用該template,還保持獨立的template
(2) include 則是將目標文件中的template代碼進行整體引入，相當于復制過來。沒有了獨立性

舉例

<import src="template.wxml">