WXML(WeiXin Markup Language)是框架設計的一套標籤語言,結合基礎元件、事件系統,可以建構出頁面的結構。
我覺得WXML 透過三個緯度來介紹:縱向、橫向、邏輯處理. 這裡先介紹個簡單介紹,它們也是開發小程式的基礎,需要的時候可以根據文檔具體使用, 以後介紹具體功能時候再擴充。
縱向
縱向: 也就是元件的組合,包括:系統元件、第三方元件、自訂元件.
#例如:
<view> <view> <image></image> <text> 用户名 </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 樣式
橫向橫向: 元件的屬性#描述 | |
---|---|
唯一識別 | |
樣式表 | |
內聯樣式 | |
hidden | |
#data-* |
bind* /catch*
#元件事件
邏輯處理
邏輯處理: 根據綁定好的資料決定怎麼顯示視圖#資料綁定
<!--wxml--> <view> {{message}} </view> // page.js Page({ data: { message: 'Hello MINA!' } })清單渲染
<!--wxml--> <view> {{item}} </view> // page.js Page({ data: { array: [1, 2, 3, 4, 5] } })
條件渲染
<!--wxml--> <view> WEBVIEW </view> <view> APP </view> <view> MINA </view> // page.js Page({ data: { view: 'MINA' } })如果wx: for、wx:if 要渲染視圖容器,可以用block 標籤包裹,block 標籤不是一個元件,只是一個用於包裝的元素,不會被渲染,並且只接受wx:.. 控制屬性。 ######block 和 wx:if:###
<block> <view> view1 </view> <view> view2 </view> </block>###block 和 wx:for:###
<block> <view> {{index}}: </view> <view> {{item}} </view> </block>###推薦教學:《###微信小程式###》###
以上是微信小程式頁面開發的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

Safe Exam Browser
Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

VSCode Windows 64位元 下載
微軟推出的免費、功能強大的一款IDE編輯器

WebStorm Mac版
好用的JavaScript開發工具

PhpStorm Mac 版本
最新(2018.2.1 )專業的PHP整合開發工具