微信小程序前端頁面書寫

微信小程序前端頁面書寫

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>