微信小程序WXML學習

打開開發工具的編輯器，在根目錄下找到 app.json 文件，雙擊打開，在 "pages/index/index" 上新增一行 "pages/wxml/index" 保存文件。模擬器刷新後，能夠在編輯器中找到 pages/wxml/index.wxml 文件

這裏咱們能夠觀察到pages目錄下有個多了個wxml文件夾

 

 

 

wxml語法與HTML 很是類似,可是不一樣的是，WXML 要求標籤必須是嚴格閉合的，沒有閉合將會致使編譯錯誤。(html的</br>標籤能夠不閉合)

WXML中的屬性是大小寫敏感的

核心部分:數據綁定   

用戶界面呈現會由於當前時刻數據不一樣而有所不一樣，或者是由於用戶的操做發生動態改變，這就要求程序的運行過程當中，要有動態的去改變渲染界面的能力。在 Web 開發中，開發者使用 JavaScript 經過Dom 接口來完成界面的實時更新( getElementById() )。在小程序中，使用 WXML 語言所提供的數據綁定功能，來完成此項功能。

WXML 經過 {{變量名}} 來綁定 WXML 文件和對應的 JavaScript 文件中的 data 對象屬性

egs:

<!--
{
  time: (new Date()).toString()
}
-->
<text>當前時間：{{time}}</text>

屬性值也能夠動態的去改變，有所不一樣的是，屬性值必須被包裹在雙引號中，以下：

<text data-test="{{test}}"> hello world</text>

條件邏輯:

WXML 中，使用 wx:if="{{condition}}" 來判斷是否須要渲染該代碼塊：

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

若是要一次性判斷多個組件標籤，能夠使用一個 <block/> 標籤將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

時間有點緊哈,俺仍是先學懂再寫吧