(一) 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: '張三',
}
}
})
結尾
如果文章中有什麼不足,歡迎大家留言交流,感謝朋友們的支援!
如果能幫到你的話,那就來關注我吧!如果您更喜歡微信文章的閱讀方式,可以關注我的公眾號
在這裡的我們素不相識,卻都在為了自己的夢而努力 ❤
一個堅持推送原創開發技術文章的公眾號:理想二旬不止