這年頭，一天不學習，天理難容。

還是趕緊復習微信小程序的知識，加大學習力度。

文章目錄

• WXML
• 數據綁定
• WXML基本語法
• 系統組件

WXML

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

一個微信小程序就是由以上幾個部分組成的。對于前端開發人肯定都知道。在前端中存
在 html 、 css 、 js ，其實就分別對應的是小程序中的 wxml 、 wxss 、 js 文件。其中小程序中的 wxml 中的標簽和語法，稍微和 html 有點不一樣。 wxss 語法采用的都是大部分的 css 語法，并且增加了導入的功能。

數據綁定

在很多時候，view其實就是span標簽的意思。下面就是小程序中的Hello world

但是小程序中的數據一般情況下需要動態的從服務端獲取,然后再道染輸出到視圖中顯示。
WXML中的動態數據均來自對應Page的data。數據綁定使用 Mustache語法(雙大括號)將變量包起來。

其實雙大括號就是Django的模板變量，總而言之一句話：需要使用js中傳過來的值，就必須使用雙大花括號。

WXML基本語法

WXML的語法，和一些模板語法比如Django中的模板語法非常的類似。其實就是條件渲染，列表渲染。

1. 在指定的標簽中使用 wx:if="條件" ，如果條件成立，則會渲染這個標簽。示例代碼如下：<view wx:if="{{age > 18}}"> 進入網吧</view> 2. else 和 elif 可以直接在 if 下面使用。示例代碼如下：<view wx:if="{{weather == '晴天'}}"> 出去旅游</view><view wx:elif="{{weather == '陰天'}}"> 去逛街</view><view wx:else> 哪里都不去</view> 注意：elif和else只能跟在if后面，否則會報錯 3. 如果需要通過條件來判斷是否需要渲染一組標簽，那么可以使用 block 。示例代碼如下：<block wx:if="{{weather == '晴天'}}"><view> 出去旅游</view></block><block wx:elif="{{weather == '陰天'}}"><view> 去逛街</view></block><block wx:else><view>哪里都不去</view></block>

列表渲染：

1. 通過語法 wx:for="{{列表}}" 來渲染一個列表。示例代碼如下：<view wx:for="{{[1,2,3,4]}}">{{item}} </view> 2. 循環中，默認的下標名稱是 index ，默認的值的名稱是 item 。如果想要修改循環列表的值和下標的名稱，那 么可以通過 wx:for-index 和 wx:for-item 來指定。示例代碼如下：<view wx:for="{{[1,2,3,4]}}" wx:for-index='idx' wx:for-item="value">{{index}}/{{value}} </view>

這里會報Now you can provide attr wx:keyfor a wx:for to improve performance.，無視即可。

下面代碼是一個九九乘法表
`

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i"><view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j"><view wx:if="{{i <= j}}">{{i}} * {{j}} = {{i * j}}</view></view> </view>

具體使用參考：https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/list.html

系統組件

下面補充下小程序的系統組件，下一篇繼續復習。

• 視圖容器：cover-image、cover-view、movable-area、movable-view、scroll-view、swiper、swiper-item、view
• 基礎內容：icon、progress、rich-text、text
• 表單組件：button、checkbox、checkbox-group、editor、form、input、label、picker、picker-view、picker-view-column、radio、radio-group、slider、switch、textarea
• 導航：functional-page-navigator、navigator
• 媒體組件：audio、camera、image、live-player、live-pusher、video
• 地圖：map?畫布：canvas
• 開放能力：ad、official-account、open-data、web-view
• 原生組件說明：native-component
• 無障礙訪問：aria-component
• 導航欄：navigation-bar
• 頁面屬性配置節點：page-meta

具體使用參考：https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html

總結

以上是生活随笔為你收集整理的四十七、微信小程序开发页面结构WXML的全部內容，希望文章能夠幫你解決所遇到的問題。

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