微信小程式頁面開發

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內聯樣式#hiddenhidden#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 == &#39;WEBVIEW&#39;}}"> WEBVIEW </view>
<view wx:elif="{{view == &#39;APP&#39;}}"> APP </view>
<view wx:else="{{view == &#39;MINA&#39;}}"> 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>

###推薦教學：《###微信小程式###》###

以上是微信小程式頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章！