微信小程式----WXML

簡介

全稱：

WXML 全稱是 WeiXin Markup Language，是小程式架構設計的标簽語言。

WXML 檔案字尾名是 .wxml，語句在文法上同 HTML 非常相似

标簽閉合編譯：

WXML 要求标簽必須是嚴格閉合的，沒有閉合将會導緻編譯錯誤。

WXML中的屬性是大小寫敏感：

WXML和 HTML 非常相似，WXML 由标簽、屬性等等構成。但是也有很多不一樣的地方

下面來一一闡述一下：

1. 标簽名不一緻
   1. HTML 經常會用到的标簽是 div, p, span，開發者在寫一個頁面的時候可以根據這些基礎的标簽組合出不一樣的元件，例如彈窗等等。既然都需要這些元件，那幹脆把這些常用元件包裝起來，大大提高開發效率。
   2. 小程式的 WXML 用的标簽是 view, button, text 等等，這些标簽就是小程式給開發者包裝好的，此外還提供了地圖、視訊、音頻等等元件。
2. 屬性不一緻

   1. 屬性：WXML多出wx:if、wx:for等一些屬性及表達式

      在網頁的一般開發流程中，通常會通過 JS 操作 DOM (對應 HTML 的描述産生的 樹)，以引起界面的一些變化響應使用者的行為。

   2. MVVM模式：使用者點選某個按鈕的時候，可以通過JS操作DOM。當項目越來越大的時候，代碼會充斥着非常多的界面互動邏輯，這顯然不是一個很好的開發模式，是以就有了 MVVM 開發模式（例如 React, Vue），提倡把渲染和邏輯分離。
   3. MVVM模式：簡單來說就是不要再讓 JS 直接操控 DOM，JS 隻需要管理狀态即可，然後再通過一種模闆文法來描述狀态和界面結構的關系即可。
   4. 小程式的架構也是用到了這個思路，例如資料綁定案例。
3. 資料data初始化：
   1. 頁面需要顯示動态資料必須要定義到data對應的變量中；
   2. 如果該資料在操作過程中發生變化，需要将新資料重新綁定到該變量中，文法為this.setData({屬性名：屬性值})
   3. 擷取data資料文法為this.data.屬性名

基本标簽

視圖容器标簽

<view>

先介紹最基礎的一個容器标簽

<view></view>

功能：基本視圖容器，類似于頁面開發時的

<div></div>

标簽。

文本标簽

<text>

功能：基本文本資訊，類似于

<span></span>

标簽

WXML屬性

屬性不一緻

資料綁定案例。

home.wxml

home.wxss

home.js

頁面渲染結果

WXML屬性操作

資料驅動案例

wx:if屬性決定是否渲染，注意wx:if後值通過{{}}綁定

wxml代碼

js代碼

控制顯示資訊

頁面效果

将status改為false

控制台效果

area不在控制台内消失

頁面效果

添加按鈕操作，控制顯隐

在原來基礎上新增按鈕文本切換

WXML屬性

資料綁定：

通過Mustache 即雙大括号{{}}文法把變量綁定到界面上，稱為資料綁定。

屬性：

僅僅通過資料綁定還不夠完整描述狀态和界面的關系，還需要 if/else, for等控制能力，在小程式裡邊，這些控制能力都用 wx: 開頭的屬性來表達。

WXML文法—資料綁定

WXML 中的動态資料均來自對應 Page 的 data

1. 文本綁定

   

   data初始化資料中

   

   渲染結果

   

2. 屬性綁定（class、id、style等屬性動态綁定）

   

   data初始化資料中

   

   渲染結果

   

3. 算術運算

   WXML的文本插值可以進行算術運算

   

   data初始化資料中

   

   渲染結果

   

4. 三目運算/三元運算

   

   渲染結果

   

5. 字元串運算

   

   data初始化資料

   

   渲染效果

   

WXML文法—清單渲染

指定變量名

wx:for-item 可以指定數組目前元素的變量名

wx:for-index 可以指定數組目前下标的變量名

渲染結果

清單渲染案例

9*9乘法表

data初始化資料

<block>

标簽

如果不想要标簽多層嵌套，可以在外層使用

<block

>标簽進行嵌套，block不會渲染讀取出來

wx:key屬性

wx:for通常需要使用 wx:key 來指定清單中項目的唯一的辨別符

接下來結合switch開關按鈕，體會下wx:key的作用

初始化資料data

此時，每個switch按鈕都被view嵌套者，如果不想用嵌套文法，可以在外層用block标簽

添加操作按鈕

注意：小程式無法不支援數組push和unshift等文法。這裡用concat達到數組開頭添加元素的效果

添加操作按鈕

點選添加按鈕

點選添加按鈕後發現，之前給開關1綁定的開屬性被新開關取代，沒有實時跟蹤到自身，是以需要添加key，給每個元素添加身份識别。