WXML（WeiXin Markup Language）是框架設(shè)計的一套標簽語言，結(jié)合基礎(chǔ)組件、事件系統(tǒng)，可以構(gòu)建出頁面的結(jié)構(gòu)。
我覺得 WXML 通過三個緯度來介紹：
縱向、橫向、邏輯處理 . 這里先介紹個簡單介紹，它們也是開發(fā)小程序的基礎(chǔ)，需要的時候可以根據(jù)文檔具體使用， 以后介紹具體功能時候再擴展。
縱向縱向: 也就是組件的組合，包括：
系統(tǒng)組件、第三方組件、自定義組件 .例如：
用戶名 系統(tǒng)組件:視圖容器：
cover-image、cover-view、movable-area、movable-view、scroll-view、swiper、swiper-item、view基礎(chǔ)內(nèi)容：
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導(dǎo)航：
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導(dǎo)航欄：
navigation-bar頁面屬性配置節(jié)點：
page-meta具體使用參考：
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html第三方組件: 例如 WeUI 組件庫等自定義組件：
自定義組件擁有自己的 wxml 模板和 wxss 樣式橫向橫向: 組件的屬性屬性名描述id唯一標識class樣式表style內(nèi)聯(lián)樣式hidden隱藏data-*事件傳遞數(shù)據(jù)bind* /catch*組件事件邏輯處理邏輯處理: 根據(jù)綁定好的數(shù)據(jù)決定怎么顯示視圖數(shù)據(jù)綁定 {
{
message}
}
// page.js Page({
data: {
message: '
Hello MINA!'
}
}
)列表渲染 {
{
item}
}
// page.js Page({
data: {
array: [1, 2, 3, 4, 5] }
}
)條件渲染 WEBVIEW APP MINA // page.js Page({
data: {
view: '
MINA'
}
}
)用于包裹視圖組件的 block如果 wx:for、wx:if 要渲染視圖容器，可以用 block 標簽包裹，block 標簽不是一個組件，只是一個用于包裝的元素，不會被渲染，并且只接受 wx:.. 控制屬性。
block 和 wx:if：
view1 view2 block 和 wx:for：
{
{
index}
}
: {
{
item}
}
推薦教程：
《微信小程序》以上就是微信小程序頁面開發(fā)的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！
微信
分享相關(guān)標簽：
微信小程序本文轉(zhuǎn)載于：
簡書，如有侵犯，請聯(lián)系[email protected]刪除
上一篇：
微信小程序調(diào)用圖片安全API
下一篇：
微信用戶與姓名不匹配是什么意思？相關(guān)文章相關(guān)視頻微信小程序省市聯(lián)動功能微信小程序中自定義select下拉選項框組件微信小程序必知必會面試題微信小程序轉(zhuǎn)發(fā)好友的功能微信小程序頁面開發(fā)微信小程序事件 以及事件對象微信小程序開發(fā)工具的安裝初識微信小程序(2) [溫州做微信公眾號]