一個小程序框架頁面文件由4個文件組成，其中就包含wxml，wxml和js一樣都是必填的。其作用是配置頁面結構。
基本語法

<!-- 在此處寫注釋 --><標簽名 屬性名1="屬性值1" 屬性名2="屬性值2" ...> ...</標簽名>

所有組件的公共屬性（我認為最常用的，也是寫這個小程序用到的）：

結合我們的小程序看一看具體的用法：
數據綁定：

<view style='width:100%;margin:0 auto;text-align:center;font-size:34rpx;margin-bottom:10rpx;'>{{s_awards}}</view>

先解釋一下 style 是組件的內聯樣式屬性
text-align:cente 文字居中
font-size: 34rpx 行高=字的高度
那么，重要的是
數據綁定使用 Mustache 語法（雙大括號）將變量包起來
在index.js層找到
所以此時，等價于<view>?</view>
顯示是這樣的

js層s_awards改變
s_awards: e.detail.end ? “？” : e.detail.s_awards,
顯示也改變

在寫小程序是，需要注意如下幾點

{{}}內可以進行簡單的邏輯運算

{{}}可以直接放置數字、字符串、或者是數組

變量名是大小寫敏感

沒有被定義的變量的或者是被設置為 undefined 的變量不會被同步到 wxml

條件渲染

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

因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 標簽將多個組件包裝起來，并在上邊使用 wx:if 控制屬性，例如程序的兩個button組件標簽都用view給包裝起來。
示例代碼：

<view class='juedinoption' wx:for='{{xiaojuedingArr}}' wx:key='key' wx:if='{{index<3 && share}}' bindtap='xiaojueding' data-idx='{{index}}'>{{item.option}}</view><view class='share' wx:if='{{!share}}'><button class="index__share" openType="share">轉發給朋友</button><button class="index__share" bindtap='generate'>分享到朋友圈</button></view>

實現的效果呢，當share為true 且 index<3的時候：

share為false：

除此之外，還可以使用 wx:elif 和 wx:else 來添加一個 else 塊。本項目中并沒有使用。

列表渲染
在組件上使用 wx:for 控制屬性綁定一個數組，即可使用數組中各項的數據重復渲染該組件。默認數組的當前項的下標變量名默認為 index，數組當前項的變量名默認為 item。
類似于編程語言數組遍歷，具體的例子就是條件渲染的第一個中，用到了。

總結

以上是生活随笔為你收集整理的以index.wxml为例解析WXML的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。