微信小程式 wxml 快速入土

適用於有一定WEB前端基礎的，通過例項快速瞭解wxml的語法和作用原理

新建一個js和一個wxml字尾的檔案，直接開始寫程式碼：

<text> {{msg}} </text>

不換行，行內元素，插入文字,這裡的文字可以是直接表示的字串，也可以是頁面js檔案data中自定義的字串變數，後面出現的字串的同理。

---

<view> {{msg}} </view>

view屬於檢視容器元素，文字會換行

---

  <checkbox checked="{{isChecked}}"> </checkbox>`  

核取方塊，isChecked為頁面js檔案data中自定義的Bool型別的變數，花括號和字串之間不能有空格

---

列表渲染

如果列表中專案的位置會動態改變或者有新的專案新增到列表中，並且希望列表中的專案保持自己的特徵和狀態（如 input 中的輸入內容，switch 的選中狀態），需要使用 wx:key 來指定列表中專案的唯一的識別符號。

wx:key 的值以兩種形式提供
1.字串，代表在 for 迴圈的 array 中 item 的某個 property，該 property 的值需要是列表中唯一的字串或數字，且不能動態改變。

2.保留關鍵字 *this 代表在 for 迴圈中的 item 本身，這種表示需要 item 本身是一個唯一的字串或者數字。
當資料改變觸發渲染層重新渲染的時候，會校正帶有 key 的元件，框架會確保他們被重新排序，而不是重新建立，以確保使元件保持自身的狀態，並且提高列表渲染時的效率。
如不提供 wx:key，會報一個 warning， 如果明確知道該列表是靜態，或者不必關注其順序，可以選擇忽略。

<view wx:for="{{list}}"  wx:for-item="i" wx:for-index="num" wx:key="id">  

</view>

list為頁面js檔案data中自定義的陣列,例如：

list:[
    {
        id:0,
        name:"abc"
    },
    {
        id:1,
        name:"def"
    },
    {
        id:2,
        name:"ghi"
    }
]

i 和 num為自定義的臨時變數名，表示遍歷陣列時當前的物件與其對應的索引, view中均可使用，如果只有一層迴圈，可以省略對wx:for-item和wx:for-index的賦值，其預設值為"item"和"index"

wx:key用來指定陣列中物件的某個唯一屬性，以提高渲染效能，如果陣列是基本型別陣列（比如[1,2,3,4,5]，[“a”,“bb”,“ccc”,“d”]）,則寫: wx:key="*this",不寫wx:key也可以

如果把上面for迴圈的view標籤替換成 block 標籤，那麼迴圈渲染陣列的時候將不會渲染出多個標籤,每個標籤中渲染對應的每個陣列元素, 而是直接將陣列中的元素渲染在同一個標籤中.

---

條件渲染

<view wx:if="{{is_visible}}"> </view>

is_visible 為一個布林型別的值(變數/表示式),當值為true時渲染該標籤,值為false時不渲染.

還可以接elif,或者else:

<view wx:if="{{is_a}}"> </view>
<view wx:elif="{{is_b}}"> </view>
<view wx:elif="{{is_c}}"> </view>
<view wx:else> </view>

當前面的三種條件都不滿足時,就會渲染最後一個帶有wx:else的標籤

加入hidden屬性也可以隱藏標籤(不渲染)

<view hidden>abcde</view>
<view hidden="{{is_hidden}}">abcde</view>

以上兩種寫法都可行.第二種可以實現條件渲染,當is_hidden的值為true時隱藏標籤

當標籤頻繁地顯示/隱藏時優先使用hidden屬性可以顯著提高效能,該方法的作用方式是更改標籤的樣式來實現隱藏標籤
對於單次切換顯示/隱藏時使用wx:if,該方法的作用方式是從頁面中移除標籤元素.

---

元件

以input為例

<input type="text" bindinput="handleInput"/>
<view>{{va}}</view>

使用者輸入時觸發事件並呼叫頁面js檔案中定義的handleInput函式

data
{
    va = "",
},

handleInput:function(e)
{
    this.setData({
        va:e.detail.value
    })

}

其中e.detail表示元件的屬性，並可以使用點運算子來訪問其中的每一個屬性，比如在官方文件裡我們可以看到input元件所擁有的所有屬性以及事件
微信官方文件 · 小程式 · input
其他的元件的事件繫結以及在事件處理函式中對元件屬性的訪問的實現均如此。

---

不更了，
再也不想寫微信小程式了，沒耐心了。
可能是我太菜了吧