本篇文章，帶大家來了解一下，wxml基本語法，與html相同的部分就不說了，默認你已掌握了，如果沒有掌握，那就先去學學，或者留言，我給你點資料。
wxml語法幫助文檔：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
1.數據綁定
WXML 中的動態數據來自對應 Page 的 data設置，使用 Mustache 語法，即雙大括號模式
{{變量名}}
<view>{{test}}</view>
在index.js中鍵入如下代碼：
Page({ data: { test: '老楊學堂' } })
保存，即可在模擬器中看到顯示 老楊學堂 這幾個字，如圖示：
太簡單了是吧，只要格式寫對，括號沒有問題，那就沒有問題。
但這有何意義？在wxml頁面直接寫 “老楊學堂”幾個字不香嗎？為什么還要費用做數據綁定。這是因為，數據綁定技術，將js業務邏輯數據通過數據綁定顯示到wxml頁面，實現了動態數據，將來我們無論是網絡獲取的數據還是用戶輸入的數據，都將通過這種方式進行數據傳遞，實現動態交互。
數據綁定也可以是表達式
在index.wxml文件中鍵入
<view>{{age+10<30?'成家立業':'自由活動'}}</view>
在index.js文件中鍵入：
Page({ data: { test: '老楊學堂', age:22 } })
在頁面顯示什么，自由活動。
其他的各位可以參考文檔自由測試一下。
補充一下，數據綁定可能會出現在標簽的多個位置，包括屬性值，樣式值等，為標簽的顯示渲染提供了多種可能性，為wxml頁面靈活控制提供了有力支持。
2.wx:if條件渲染
在wxml頁面用到條件語句來控制組件顯示時，需要用到wx:if語句，
格式是：
wx:if="{{邏輯語句}}"
示例：
<view wx:if="{{age>18}}"> 成人 </view> <view wx:elif="{{age<12}}"> 兒童 </view> <view wx:else> 青少年 </view>
還可以做另外一種寫法，需要用到< block>標簽，block標簽本身並無實際意義，最終不會在頁面留下任何東西，只是為了包裝控制語句
<block wx:if="{{age>18}}"> <view> 成人 </view> </block> <block wx:elif="{{age<12}}"> <view> 兒童 </view> </block> <block wx:else> <view> 青少年 </view> </block>
以上種寫法完全一樣，你喜歡哪種寫法呢？
3.wx:for列表渲染
列表展示是目前各種移動應用必備布局，需要熟練掌握應用
首先准備一下列表數據，即數組數據，在index.js頁面，data節內進行如下配置
Page({ data: { test: '老楊學堂', age: 1, items: [{ text: 'red', color: '#f00' }, { text: 'green', color: '#0f0' }, { text: 'blue', color: '#00f' } ] } })
在index.wxml頁面進行展示，代碼如下：
<block wx:for="{{items}}" wx:key="*this"> <view style="color:{{item.color}}"> {{item.text}} </view> </block>
展示效果如圖：
簡單解釋一下：
wxml頁面中的wx:for="{{items}}"，items要與page中的items鍵對應，當然，你也可以用別的名字
item 代表是for循環中的每一項，這個不能換，如果要換成別的名字，必須顯示指定。
wx:key是指定列表中項目的唯一的標識符，通常用*this表示，代表當前循環對象。
我們再來看，指定循環對象的名字和索引怎么做
在index.wxml頁面代碼如下：
<block wx:for="{{items}}" wx:key="*this" wx:for-item="style" wx:for-index="myIndex"> <view style="color:{{style.color}}"> {{myIndex+","+style.text}} </view> </block>
展示效果如圖：
OK，這篇文章就到這了，有問題，請留言！