微信小程式開發|頁面檔案 wxml

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

我覺得 WXML 通過三個緯度來介紹：縱向、橫向、邏輯處理 . 這裡先介紹個簡單介紹，它們也是開發小程式的基礎，需要的時候可以根據文檔具體使用， 以後介紹具體功能時候再擴充。

縱向

縱向: 也就是元件的組合，包括：系統元件、第三方元件、自定義元件 .

例如：

<view class="container">
  <view class="userinfo">
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname"> 使用者名 </text>
  </view>
</view>
           

系統元件:

• 視圖容器：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

第三方元件: 例如 WeUI 元件庫等

自定義元件：自定義元件擁有自己的 wxml 模闆和 wxss 樣式

橫向

橫向: 元件的屬性

屬性名	描述
id	唯一辨別
class	樣式表
style	内聯樣式
hidden	隐藏
data-*	事件傳遞資料
bind* /catch*	元件事件

邏輯處理

邏輯處理: 根據綁定好的資料決定怎麼顯示視圖

資料綁定

<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
  data: {
    message: 'Hello MINA!'
  }
})
           

清單渲染

<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
  data: {
    array: [1, 2, 3, 4, 5]
  }
})
           

條件渲染

<!--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:for、wx:if 要渲染視圖容器，可以用 block 标簽包裹，block 标簽不是一個元件，隻是一個用于包裝的元素，不會被渲染，并且隻接受 wx:… 控制屬性。

block 和 wx:if：

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

block 和 wx:for：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
           

參考：

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/