WXML（WeiXin Markup Language）是框架設(shè)計(jì)的一套標(biāo)簽語言命贴，結(jié)合基礎(chǔ)組件攘烛、事件系統(tǒng)湃交，可以構(gòu)建出頁面的結(jié)構(gòu)。
我覺得 WXML 通過三個(gè)緯度來介紹：縱向谦秧、橫向竟纳、邏輯處理 . 這里先介紹個(gè)簡(jiǎn)單介紹撵溃，它們也是開發(fā)小程序的基礎(chǔ)，需要的時(shí)候可以根據(jù)文檔具體使用锥累， 以后介紹具體功能時(shí)候再擴(kuò)展缘挑。
縱向
縱向: 也就是組件的組合，包括：系統(tǒng)組件桶略、第三方組件语淘、自定義組件 .
例如：
<view class="container">
<view class="userinfo">
<image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname"> 用戶名 </text>
</view>
</view>
系統(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é)點(diǎn)：page-meta
具體使用參考：
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
第三方組件: 例如 WeUI 組件庫等
自定義組件：自定義組件擁有自己的 wxml 模板和 wxss 樣式
橫向
橫向: 組件的屬性
| 屬性名 | 描述 |
|---|---|
| id | 唯一標(biāo)識(shí) |
| class | 樣式表 |
| style | 內(nèi)聯(lián)樣式 |
| hidden | 隱藏 |
| data-* | 事件傳遞數(shù)據(jù) |
| bind* /catch* | 組件事件 |
邏輯處理
邏輯處理: 根據(jù)綁定好的數(shù)據(jù)決定怎么顯示視圖
數(shù)據(jù)綁定
<!--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 標(biāo)簽包裹航唆，block 標(biāo)簽不是一個(gè)組件，只是一個(gè)用于包裝的元素院刁，不會(huì)被渲染糯钙，并且只接受 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/
橋智科技：科技賦能夢(mèng)想退腥！專注廣州任岸、深圳和惠州小程序定制開發(fā)、APP 應(yīng)用定制開發(fā)狡刘、網(wǎng)站開發(fā)享潜、區(qū)塊鏈錢包開發(fā)！
