微信小程序WXML頁面常用語法（講解+示例）

(一) WXML 是什么

官方說明：WXML（WeiXin Markup Language）是框架設計的一套標簽語言，結合基礎組件、事件系統，可以構建出頁面的結構

在前面我們就已經提過，WXML，就可以理解為我們傳統頁面中的HTML，它是微信為我們提供的一套標簽語言，可以說它就是我們小程序的臉面（雖然沒經過CSS裝飾前不一定光鮮亮麗），開發中 WXML 頁面就作為我們一些邏輯行為的入口，以及效果展示的承載者。

再大白話一點：你所看到的小程序頁面長什么樣（不涉及背后做了什么行為，只說表面），就是 WXML（主要） + WXSS （美化） 實現的

這一篇，我們主要涉及到的是 WXML 中例如數據綁定、或者運算等等，但是學習之前，很顯然，我們需要認識幾個常見的標簽，后面我們會總結一些常用的標簽，下面會用到的有：

<text></text> 、<view></view> <image></image> 還有一些標簽，大家去看官網文檔就可以了，寫的非常清楚，我們這里重點還是說一下關於其中的一些標簽語法問題

官網——WXML語法文檔

https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/

官網——組件文檔

https://developers.weixin.qq.com/miniprogram/dev/component/

<!--pages/demo01/demo01.wxml-->

<!-- text 不會換行，可以理解為傳統頁面中的 span 行內元素-->
<text>這是text標簽1</text>
<text>這是text標簽2</text>

<!-- view 會換行，可以理解為傳統頁面中的 div 塊級元素 -->
<view>這是div標簽1</view>
<view>這是div標簽2</view>

<view>
  <!-- 我博客的圖，顯示如果出現什么問題，自己替換一下哈 -->
  <image  mode='widthFix' style='width:60%' src='https://www.ideal-20.cn/medias/avatar.jpg'></image>
</view>

看一下效果

(二) 數據綁定

雖然還不涉及到什么頁面的美化，以及復雜的標簽，不過一個極為簡單的靜態頁面現在已經可以構造出來了，歸根結底，我們最后都是要進行前后台數據的交互的，而微信小程序就為我們提供了很多很好用的用法，能很快的進行數據的綁定操作

有一個前提條件，我們先模擬一些數據，我們只需要在頁面的 js 文件中的 data對象中定義小程序初始化的數據，例如下面代碼，我們隨便拿一些常見的數據類型來模擬一下

Page({
  /**
   * 頁面的初始數據
   */
  data: {
    msg: "你好，微信小程序",
    status: 100,
    isLogin: true,
    person:{
      name: "張三",
      age: 22,
      profession: "student"
    },
    isChecked: true
  },
})

(1) 常見類型普通寫法

如何在 WXML 標簽組件中進行數據的綁定其實是非常簡單的，微信小程序中通過 {{}} 來解析剛才在 JS 中模擬的變量

要注意：直接通過 {{}} 解析的變量都是 頁面 js 文件中 Page --> data 下的

A：字符串

字符串內容直接用兩個大括號括住接收就可以了，在上面我們有這樣的定義：

msg: "你好，微信小程序", 所以直接括住 msg 就可以獲取到后面的值了

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

B：數值

數值也是一樣直接可以獲取

<view>{{status}}</view>

C：布爾類型

布爾類型第一個代碼是直接打印出其布爾類型 true 或者 false

<view>{{isLogin}}</view>

而下面配合 checkbox 就可以實現是否選中的效果

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

D：對象

對象這塊如果你直接打印 person 就會輸出一個 Object 類型，所以如果想要拿到對象的屬性值，一定要指定到具體的屬性

<view>{{person.name}}</view>
<view>{{person.age}}</view>
<view>{{person.profession}}</view>

看一下上述所有的綁定效果

(2) 組件屬性中

例如我們 view 組件的 id 值前綴是固定的 user- 后面就是用戶的序號，這時候就可以通過變量來進行巧妙的解析到屬性中了

注：不要輕易的亂加空格，否則可能會讀取失敗例如： <view id=" user-{{uid}}"></view>

<view id="user-{{uid}}"></view>

看一下 Wxml 的源碼 id 這個屬性中已經進行了拼接，這種方式同樣還會常用在 class 或者 style 中，配合三元運行能不錯的實現一些需求，下面我們會提到

(三) 運算

首先我們依舊定義一些數據，三個整數，和兩個字符串

Page({
  data: {
    a: 11,
    b: 22,
    c: 33,
    msg: "姓名",
    name: "張三"
  },
})

(1) 算數運算

直接在 {{}} 中進行 加減乘除等的運算，直接就可以得到結算的結果，例如：

<view>{{a + b + c}}</view>
<view>{{a + b}} + {{c}}</view>

(2) 字符串運算

如果是字符串類型的數據，利用 + 進行運算，結果是一個拼接的效果

<view>{{'a' + 'b' + 'c'}}</view>
<view>{{'11' + '22' + '33'}}</view>
<view>{{msg + '：' +name}}</view>

(3) 邏輯判斷

這個就是常見的 if 判斷，例如使用 wx:if 這個屬性，那么就只有在后面的表達式為 true 的情況下才會顯示文本 a 大於 0

<view wx:if="{{a > 0}}">a 大於 0</view>

(4) 三元運算

三元運算的應用場景還是很多的（等式 ? : true情況，false的情況）

<view>{{11 + 22 === 33 ? true : false}}</view>
<view>{{11 + 22 === 33 ? '正確' : '錯誤'}}</view>
<view>{{a + b === c ? '等式成立' : '等式不成立'}}</view>

三元補充：

通過在屬性中解析變量的方式，可以達到根據變量的值，來指定不同的 class名，以顯示不同的樣式

例如我們的 css 樣式是這樣的，iconfont 是我們共用的，所以直接寫在屬性中就可以了，而究竟是用 icon-back 還是 icon-remove 就可以通過一個變量來操縱，例如我們下面的 isClick 就是在 js 里 data 中定義的一個 布爾類型的變量

.iconfont {......}
.icon-back:before {......}
.icon-remove:before {......}

當 isClick 為 true 就執行 class 就是這樣的 class="iconfont icon-remove" 為 false 就是用另一個，我們就可以通過 控制變量值來進行不同的顯示

<icon class="iconfont {{isClick ? 'icon-remove':'icon-back'}}"

看一下上述所有運算的執行結果（不含補充的結果）

(四) 列表循環（列表渲染）

(1) 模擬數據

依舊我們給一些模擬數據，一個是 person 這樣的對象內部有一些屬性，還有一個就是 studentList 學生集合，其中有三個學生的數據

Page({
  data: {
    person:{
      pid: 1,
      name: "張三",
      age: 22,
      profession: "student"
    },
    studentList:[{
        sid:1,
        name:"湯姆",
        gender:"男"
      },{
        sid:2,
        name:"傑克",
        gender:"男"
      },{
        sid:3,
        name:"瑪麗",
        gender:"女"
      }
    ]
  },
})

如果我們接受到了后台的一些集合或者數組等內容，循環遍歷是一個非常常用的操作

(2) 正式使用

組件（標簽）上使用 wx:for 就可以綁定一個數組或集合內容，就可用數組中各項的數據重復渲染該組件

先舉個例子

<view>
    <view 
    wx:for="{{studentList}}" wx:for-item="item" wx:for-index="index" wx:key="sid">
    	{{index}} --- {{item.name}} 
    </view>
</view>

我們分別來解釋一下：

• wx:for：數組或者對象

• wx:for-item：循環項（數組或集合）的變量名稱，同時一般默認為 item

• wx:for-index：循環項（數組或集合）的索引（下標），同時一般默認為 index

• wx:key：綁定一個唯一的值，可以提高列表渲染的性能，可以簡單理解為主鍵的概念，例如這里我傳入了 studentList 中不可能重復的值 sid

  • 如果你的數組只是一個普通的數組，例如 [11,22,65,23,3,6] 沒有所謂唯一的值，就可以使用 wx:key="*this" 即表示你的數組是一個普通的數組，*this 表示的是 item 本身

如果傳這個 key 值，會有一個警告彈出

(3) 嵌套用法的補充說明

• 如果你的循環只有一層，那么 wx:for-item="item" wx:for-index="index" 這兩個內容實際上是可以省略的，小程序會自動把這兩個內容設置為 item 和 index

• 如果你的循環是一個嵌套的效果，那么切記一定 item 和 index 的值一定不要重復...

嵌套的正確寫法

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i" wx:key="*this">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j" wx:key="*this">
    <view wx:if="{{i <= j}}" wx:key="*this">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

再舉一個例子（遍歷對象的所有屬性）：

<view>
    <view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
    {{key}} --- {{value}} 
    </view>
</view>

看一下執行效果

(4) 循環（渲染）block標簽

如果我們使用兩種不同的組件（標簽）看看最終渲染出來的結果有什么區別呢？

方法一（view 標簽）

<view wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
    {{key}} --- {{value}} 
</view>

• 結果一

<view> pid --- 1 </view>
<view> name --- 張三 </view>
<view> age --- 22 </view>
<view> profession --- student </view>

方法二（block 標簽）

<block wx:for="{{person}}" wx:for-item="value" wx:for-index="key" wx:key="pid">
    {{key}} --- {{value}} 
</block>

• 結果二

pid --- 1 name --- 張三 age --- 22 profession --- studen

通過控制台中 Wxml 界面，可以看到，只有在 view 組件下遍歷內容時才真正的生成了 dom 結構，而直接使用 block 則只是將內容重復寫了幾次，不會變成真正的dom元素

(五) 邏輯判斷（條件渲染）

(1) 用法

這塊理解沒什么難點，無非就是關於邏輯的幾種判斷，看一個例子就清楚了

說明：isLogin 是在 js 中模擬的一個數據，分別賦予 true false 或者其他的 例如 null，會根據邏輯值顯示不同的內容

<view wx:if="{{isLogin == true}}">已經登錄，邏輯為 true</view>
<view wx:elif="{{isLogin == false}}">未登錄，邏輯為 false</view>
<view wx:else>不確定邏輯</view>

(2) 補充 hidden

補充用法（hidden）：

通過上面的 if else 等可以控制組件例如 view 的顯示，而有一個屬性 hidden 同樣可以實現根據邏輯值控制組件的顯示

例如給 hidden 傳入一個 false 就會顯示出來

<view hidden="{{false}}">不隱藏</view>

(3) wx:if 和 hidden 選擇哪個

那么既然一定程度上都可以達到這種效果，我們選擇那個呢？

先來看一下

<view>---- 分界線 -----</view>
<view wx:if="{{false}}">if 隱藏</view>
<view hidden="{{true}}">隱藏</view>

看一下渲染出來的結構，關於 wx:if 的那塊直接就沒有渲染出來了，只有 hidden 的那個，由此可以得出：

• wx:if 是直接把標簽從頁面結構中移除掉了
• hidden 是通過添加樣式的方式的隱藏，標簽結構還在

所以，當標簽不總是切換顯示的時候，可以考慮先用 wx:if ，標簽切換頻繁的時候用 hidden

(六) 模板

(1) 創建模板

模板的字面意思就是，一個可以應用在多處，通用的一個版塊，如何去用呢？

使用 name 屬性，作為模板的名字。然后在 <template/> 內定義代碼片段

<template name="test1">
  <view>
    <text> 這是一個 template 模塊 </text>
    <text> {{id}}: {{name}} </text>
  </view>
</template>

(2) 引入模板

我們需要在想引用模板的頁面中引入模板，WXML 提供兩種文件引用方式 import 和 include

如果沒有效果，可以看一下是不是路徑寫錯了，要根據自己定義的來寫哦

<import src="../../template/test1/test1" />

<include src="../../template/test1/test1" />

這兩者的區別就是 import 有作用域的問題，官網這里寫的挺清楚，我直接貼一下：

import 有作用域的概念，即只會 import 目標文件中定義的 template，而不會 import 目標文件 import 的 template。

如：C import B，B import A，在C中可以使用B定義的template，在B中可以使用A定義的template，但是C不能使用A定義的template。

(3) 調用模板

使用 is 屬性，聲明需要的使用的模板，也就是與上面的 name 一致就可以了，然后將模板所需要的 data 傳入，如（直接傳入）：

<template is="test1" data="{{id:'0', name:'張三'}}"</template>

賦值方式還有一種常用的

它的意思就是將調用這個模板頁面中的 student 對象變量賦值給這個模板，三個點就是一個擴展運算符，作用就是將這個student 對象展開

<template is="test1" data="{{...student}}"></template>

例如

Page({
  data: {
    student: {
      id: 0,
      name: '張三',
    }
  }
})

結尾

如果文章中有什么不足，歡迎大家留言交流，感謝朋友們的支持！

如果能幫到你的話，那就來關注我吧！如果您更喜歡微信文章的閱讀方式，可以關注我的公眾號

在這里的我們素不相識，卻都在為了自己的夢而努力 ❤

一個堅持推送原創開發技術文章的公眾號：理想二旬不止