WXML模板

本節(jié)學(xué)習(xí)目標(biāo)

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

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

(一)wxml是什么

wxml 是微信小程序團(tuán)隊設(shè)計的一套標(biāo)簽語言榛斯，可以構(gòu)造出頁面的結(jié)構(gòu),類似html
借助wxml提供的組件我們可以實現(xiàn)文字的嵌入映挂，圖片的嵌入梁呈，視頻的嵌入汗茄，各種能力的嵌入等等

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

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

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

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

(三)wxml數(shù)據(jù)綁定

• 了解數(shù)據(jù)綁定的使用場景
• 掌握基本的數(shù)據(jù)綁定用法

數(shù)據(jù)綁定(雙向綁定)

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

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

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

(1)數(shù)據(jù)綁定之內(nèi)容綁定

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

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

(2)組件屬性綁定

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

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

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

(3) 邏輯語法

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

(1) 三元運算符

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

(2) 算數(shù)運算

• 標(biāo)簽內(nèi)支持簡單的加減乘除

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

(3)字符串運算

• 標(biāo)簽內(nèi)支持對字符串的操作

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

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

(4) 數(shù)據(jù)路徑運算

• WXML支持對對象缅刽，數(shù)組啊掏，路徑操作，讀取內(nèi)部的數(shù)據(jù)

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

(5)數(shù)據(jù)對象組合---數(shù)組

• WXML 可以在Mustache內(nèi)進(jìn)行數(shù)組的組合

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

(6) wxml 可以在雙括號內(nèi)進(jìn)行對象的組合

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

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

(四) 列表渲染

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

列表渲染使用說明

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

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

默認(rèn)情況下,數(shù)組元素中當(dāng)前項的下標(biāo)變量名為index,當(dāng)前項目值為item,必須要加上wx:key他表示獲取到的序號

• 在渲染時娜睛，可能會面臨要同時循環(huán)多個元素，那么可以使用輔助標(biāo)簽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比如數(shù)據(jù)順序發(fā)生了變更卦睹，會改變數(shù)據(jù)的結(jié)構(gòu)畦戒，導(dǎo)致重新渲染。要是使用了wx:key就會在原數(shù)據(jù)的情況下渲染數(shù)據(jù)结序。提升渲染效率障斋。

(五) 條件渲染

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

(1) 條件渲染

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

• 控制單個組件的顯示

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

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

當(dāng)wx:if對應(yīng)的值為true的時候邀层，對應(yīng)組件會進(jìn)行渲染
當(dāng)wx:if對應(yīng)的值為false的時候，對應(yīng)的組件不會進(jìn)行渲染

• else 屬性

(1) wx:if 當(dāng)進(jìn)行條件判斷的時候晴裹，使用wx:if來進(jìn)行初始的條件判斷，可單獨出現(xiàn)
(2) wx:else : 如果需要進(jìn)行多種條件判斷結(jié)果使用wx:else 來輔助進(jìn)行結(jié)果判斷
(3) wx:elif : 如果項目不止兩個判斷結(jié)果救赐，使用wx:elif來輔助進(jìn)行結(jié)果的輸出

示例:

 <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 根據(jù)值來判斷組件是否需要渲染進(jìn)入頁面

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

(六) 模板使用

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

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

• 每個模板都需要一個name屬性泌绣，作為模板的名字
• template標(biāo)簽內(nèi)部包含的是具體的模板內(nèi)容，標(biāo)簽內(nèi)借助雙大括號來進(jìn)行數(shù)據(jù)綁定
• 使用模板

<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 可以引入目標(biāo)文件中的template,template以外的不會被引入阿迈，在當(dāng)前文件中使用該template,還保持獨立的template
(2) include 則是將目標(biāo)文件中的template代碼進(jìn)行整體引入，相當(dāng)于復(fù)制過來轧叽。沒有了獨立性

舉例

<import src="template.wxml">