微信小程序學習筆記（四）--框架-視圖層

WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎組件、事件系統，能夠構建出頁面的結構。

數據綁定

使用{{}}綁定數據。

簡單綁定

<view class='first-container' bindtap='bindTapFunc'>
    FirstName:{{firstName}},lastName:{{lastName}}
  </view>

組件屬性(須要在雙引號以內)

<view id='item-{{id}}' class='first-container' bindtap='bindTapFunc'>
    FirstName:{{firstName}},lastName:{{lastName}}
</view>

控制屬性(須要在雙引號以內)

<view>
  <view wx:if="{{view==='WEBVIEW'}}">{{view}}</view>
  <view wx:elif="{{view==='APP'}}">{{view}}</view>
  <view wx:if="{{view==='MAC'}}">{{view}}</view>
</view>

關鍵字(須要在雙引號以內)

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

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

<checkbox checked="{{false}}"> </checkbox>

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

運算

三元運算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算數運算

<view> {{a + b}} + {{c}} + d </view>

邏輯判斷

<view wx:if="{{length > 5}}"> </view>

組合

也能夠在 Mustache 內直接進行組合，構成新的對象或者數組。

參考文檔

---

 

列表渲染

wx:for

在組件上使用 wx:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。

默認數組的當前項的下標變量名默認爲 index，數組當前項的變量名默認爲 item

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>

// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})

這裏頁面上數據綁定的時候，試着把item換成了隨便的字母，頁面上就不能正常顯示列表了，因此item應該是不可修改的值。

block wx:for

<block>不是一個組件，它僅僅是一個包裝元素，只接受控制屬性，不會在頁面中作任何渲染。

wx:key

若是列表中項目的位置會動態改變或者有新的項目添加到列表中，而且但願列表中的項目保持本身的特徵和狀態（如 <input/> 中的輸入內容，<switch/> 的選中狀態），須要使用 wx:key 來指定列表中項目的惟一的標識符。

參考文檔

---

 

條件渲染

wx:if

在框架中，使用 wx:if="{{condition}}" 來判斷是否須要渲染該代碼塊；也能夠用 wx:elif 和 wx:else 來添加一個 else 塊：

<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

// page.js
Page({
  data: {
    view: 'MINA'
  }
})

block wx:if

由於 wx:if 是一個控制屬性，須要將它添加到一個標籤上。若是要一次性判斷多個組件標籤，可使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

wx:if vs hidden

參考文檔

---

 

模板

定義模板

使用 name 屬性，做爲模板的名字。而後在<template/>內定義代碼片斷，如：

<!--wxml-->
<template name="staffName">
  <view>
    FirstName: {{firstName}}, LastName: {{lastName}}
  </view>
</template>

<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>

// page.js
Page({
  data: {
    staffA: {firstName: 'Hulk', lastName: 'Hu'},
    staffB: {firstName: 'Shang', lastName: 'You'},
    staffC: {firstName: 'Gideon', lastName: 'Lin'}
  }
})

使用模板

<template>中的is用於肯定須要套用哪個template，data則爲在template中展示的數據。

一個wxml文件裏面能夠定義多個<template></template>，用name來區分。

調用時，is取對應的name值便可引用對應的模板。

is 屬性可使用 Mustache 語法，來動態決定具體須要渲染哪一個模板：

<!--index.wxml-->
<template name="staffName">
  <view class='first-container'>
    FirstName:{{firstName}},lastName:{{lastName}}
  </view>
</template>
<template name="anther">
  <view class='another-container'>
      FirstName:{{firstName}},lastName:{{lastName}}
  </view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="anther" data="{{...staffC}}"></template>

效果圖：

模板的做用域

模板擁有本身的做用域，只能使用 data 傳入的數據以及模版定義文件中定義的 <wxs /> 模塊。