微信小程序前端頁面書寫
WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構。
一.數據綁定
1. 普通寫法
<view> {{ message }} </view>
Page({
data: {
message: 'Hello MINA!'
}
})
2. 組件屬性
**簡直和上面沒區別啊**
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
3. bool類型
不要直接寫 checked="false"，其計算結果是一個字符串
<checkbox checked="{{false}}"> </checkbox>
二. 運算
1. 三元運算
<view hidden="{{flag ? true : false}}"> Hidden </view>
2. 算數運算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
3. 邏輯判斷
<view wx:if="{{length > 5}}"> </view>
4. 字符串運算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
三. 列表渲染
1. wx:for
項的變量名默認為 item wx:for-item 可以指定數組當前元素的變量名
下標變量名默認為 index wx:for-index 可以指定數組當前下標的變量名
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
2. wx:for
渲染一個包含多節點的結構塊 block最終不會變成真正的dom元素
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
3. wx:key
提高效率使用的
四. 條件渲染
1. wx:if
在框架中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
<view wx:if="{{condition}}"> True </view>
也可以用 wx:elif 和 wx:else 來添加一個 else 塊：
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
block wx:if
因為 wx:if 是一個控制屬性，需要將它添加到一個標簽上。如果要一次性判斷多個組件標簽，可以使用一個 <block/> 標簽將多個組件包裝起來，並在上邊使用 wx:if 控制屬性。
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
注意： <block/> 並不是一個組件，它僅僅是一個包裝元素，不會在頁面中做任何渲染，只接受控制屬性。
2. hidden
hidden 就簡單的多，組件始終會被渲染，只是簡單的控制顯示與隱藏。
<view hidden="{{condition}}"> True </view>
類似 wx:if 不同是hiden控制顯影,而if控制是否渲染
因此，如果需要頻繁切換的情景下，用 hidden 更好，如果在運行時條件不大可能改變則 wx:if 較好。
五.特殊標簽
1.text
<!-- <text> </text> 相當於span標簽 -->
2.view
<!-- <view></view> 相當於div標簽 -->
3.block
<!--block標簽就是只顯示內容不會嵌套任何標簽 -->
4. image
圖片標簽，image組件默認寬度320px、高度240px
**注意：該標簽 其實是 web中的 圖片標簽 和 背景圖片的結合！！！ 並且不支持以前的web中的背景圖片的寫法！！！ **
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| src | String | 圖片資源地址，支持雲文件ID（2.2.3起） | |
| mode | String | 'scaleToFill' | 圖片裁剪、縮放的模式 |
| lazy-load | Boolean | false | 圖片懶加載。只針對page與scroll-view下的image有效 |
mode 有效值：
mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。
| 模式 | 值 | 說明 |
|---|---|---|
| 縮放 | scaleToFill | 不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素 |
| 縮放 | aspectFit | 保持縱橫比縮放圖片，使圖片的長邊能完全顯示出來。 |
| 縮放 | aspectFill | 保持縱橫比縮放圖片，只保證圖片的短邊能完全顯示出來。 |
| 縮放 | widthFix | 寬度不變，高度自動變化，保持原圖寬高比不變 |
| 裁剪 | top | 不縮放圖片，只顯示圖片的頂部區域 |
| 裁剪 | bottom | 不縮放圖片，只顯示圖片的底部區域 |
| 裁剪 | center | 不縮放圖片，只顯示圖片的中間區域 |
| 裁剪 | left | 不縮放圖片，只顯示圖片的左邊區域 |
| 裁剪 | right | 不縮放圖片，只顯示圖片的右邊區域 |
| 裁剪 | top left | 不縮放圖片，只顯示圖片的左上邊區域 |
| 裁剪 | top right | 不縮放圖片，只顯示圖片的右上邊區域 |
| 裁剪 | bottom left | 不縮放圖片，只顯示圖片的左下邊區域 |
| 裁剪 | bottom right | 不縮放圖片，只顯示圖片的右下邊區域 |
5, swiper
微信內置有輪播圖組件
默認寬度 100% 高度 150px
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否顯示面板指示點 |
| indicator-color | Color | rgba(0, 0, 0, .3) | 指示點顏色 |
| indicator-active-color | Color | #000000 | 當前選中的指示點顏色 |
| autoplay | Boolean | false | 是否自動切換 |
| interval | Number | 5000 | 自動切換時間間隔 |
| circular | Boolean | false | 是否采用銜接滑動 |
6.swiper-item
滑塊
默認寬度和高度都是100%
7.video
視頻。該組件是原生組件，使用時請注意相關限制。
| 屬性名 | 類型 | 默認值 | 說明 |
|---|---|---|---|
| src | String | 要播放視頻的資源地址，支持雲文件ID（2.2.3起） | |
| duration | Number | 指定視頻時長 | |
| controls | Boolean | true | 是否顯示默認播放控件（播放/暫停按鈕、播放進度、時間） |
| autoplay | Boolean | false | 是否自動播放 |
| loop | Boolean | false | 是否循環播放 |
| muted | Boolean | false | 是否靜音播放 |
<video src="{{src}}" controls></video>