微信小程式前端頁面書寫

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中的背景圖片的寫法！！！

mode 有效值：

mode 有 13 種模式，其中 4 種是縮放模式，9 種是裁剪模式。

5, swiper

微信內置有輪播圖組件

預設寬度 100% 高度 150px

6.swiper-item

滑塊

預設寬度和高度都是100%

7.video

視頻。該組件是原生組件，使用時請註意相關限制。

<video src="{{src}}" controls></video>