# (一) WXML 是什麼 官方說明：WXML（WeiXin Markup Language）是框架設計的一套標籤語言，結合基礎元件、事件系統，可以構建出頁面的結構 在前面我們就已經提過，WXML，就可以理解為我們傳統頁面中的HTML，它是微信為我們提供的一套標籤語言，可以說它就是我們小程式的臉面（雖然沒經過CSS裝飾前不一定光鮮亮麗），開發中 WXML 頁面就作為我們一些邏輯行為的入口，以及效果展示的承載者。 再大白話一點：你所看到的小程式頁面長什麼樣（不涉及背後做了什麼行為，只說表面），就是 WXML（主要） + WXSS （美化） 實現的 這一篇，我們主要涉及到的是 WXML 中例如資料繫結、或者運算等等，但是學習之前，很顯然，我們需要認識幾個常見的標籤，後面我們會總結一些常用的標籤，下面會用到的有： `` 、`` ` 還有一些標籤，大家去看官網文件就可以了，寫的非常清楚，我們這裡重點還是說一下關於其中的一些標籤語法問題 官網——WXML語法文件 `https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/` 官網——元件文件 `https://developers.weixin.qq.com/miniprogram/dev/component/` ```html ``` 看一下效果  # (二) 資料繫結 雖然還不涉及到什麼頁面的美化，以及複雜的標籤，不過一個極為簡單的靜態頁面現在已經可以構造出來了，歸根結底，我們最後都是要進行前後臺數據的互動的，而微信小程式就為我們提供了很多很好用的用法，能很快的進行資料的繫結操作 有一個前提條件，我們先模擬一些資料，我們只需要在頁面的 **js 檔案中的 data物件**中定義小程式初始化的資料，例如下面程式碼，我們隨便拿一些常見的資料型別來模擬一下 ```js Page({ /** * 頁面的初始資料 */ data: { msg: "你好，微信小程式", status: 100, isLogin: true, person:{ name: "張三", age: 22, profession: "student" }, isChecked: true }, }) ``` ## (1) 常見型別普通寫法 如何在 WXML 標籤元件中進行資料的繫結其實是非常簡單的，微信小程式中通過 `{{}}` 來解析剛才在 JS 中模擬的變數 要注意：直接通過 `{{}}` 解析的變數都是 頁面 js 檔案中 Page --> data 下的 ### A：字串 字串內容直接用兩個大括號括住接收就可以了，在上面我們有這樣的定義： `msg: "你好，微信小程式",` 所以直接括住 msg 就可以獲取到後面的值了 ```html ``` ### B：數值 數值也是一樣直接可以獲取 ```html ``` ### C：布林型別 布林型別第一個程式碼是直接打印出其布林型別 true 或者 false ```html ``` 而下面配合 checkbox 就可以實現是否選中的效果 ```html ``` ### D：物件 物件這塊如果你直接列印 person 就會輸出一個 Object 型別，所以如果想要拿到物件的屬性值，一定要指定到具體的屬性 ```html ``` 看一下上述所有的繫結效果  ## (2) 元件屬性中 例如我們 view 元件的 id 值字首是固定的 `user-` 後面就是使用者的序號，這時候就可以通過變數來進行巧妙的解析到屬性中了 注：不要輕易的亂加空格，否則可能會讀取失敗例如： `` ```html ``` 看一下 Wxml 的原始碼 id 這個屬性中已經進行了拼接，這種方式同樣還會常用在 class 或者 style 中，配合三元執行能不錯的實現一些需求，下面我們會提到  # (三) 運算 首先我們依舊定義一些資料，三個整數，和兩個字串 ```js Page({ data: { a: 11, b: 22, c: 33, msg: "姓名", name: "張三" }, }) ``` ## (1) 算數運算 直接在 `{{}}` 中進行 加減乘除等的運算，直接就可以得到結算的結果，例如： ```html ``` ## (2) 字串運算 如果是字串型別的資料，利用 `+` 進行運算，結果是一個拼接的效果 ```html ``` ## (3) 邏輯判斷 這個就是常見的 if 判斷，例如使用 `wx:if` 這個屬性，那麼就只有在後面的表示式為 true 的情況下才會顯示文字 a 大於 0 ```html ``` ## (4) 三元運算 三元運算的應用場景還是很多的（等式 ? : true情況，false的情況） ```html ``` 三元補充： 通過在屬性中解析變數的方式，可以達到根據變數的值，來指定不同的 class名，以顯示不同的樣式 例如我們的 css 樣式是這樣的，iconfont 是我們共用的，所以直接寫在屬性中就可以了，而究竟是用 icon-back 還是 icon-remove 就可以通過一個變數來操縱，例如我們下面的 isClick 就是在 js 裡 data 中定義的一個 布林型別的變數 ```css .iconfont {......} .icon-back:before {......} .icon-remove:before {......} ``` 當 isClick 為 true 就執行 class 就是這樣的 `class="iconfont icon-remove"` 為 false 就是用另一個，我們就可以通過 控制變數值來進行不同的顯示