官方說明&＃xff1a;WXML(WeiXin Markup Language)是框架設計的一套標簽語言&＃xff0c;結合基礎組件、事件系統&＃xff0c;可以構建出頁面的結構
在前面我們就已經提過&＃xff0c;WXML&＃xff0c;就可以理解為我們傳統頁面中的HTML&＃xff0c;它是微信為我們提供的一套標簽語言&＃xff0c;可以說它就是我們小程序的臉面(雖然沒經過CSS裝飾前不一定光鮮亮麗)&＃xff0c;開發中 WXML 頁面就作為我們一些邏輯行為的入口&＃xff0c;以及效果展示的承載者。愛掏網 - it200.com
再大白話一點&＃xff1a;你所看到的小程序頁面長什么樣(不涉及背后做了什么行為&＃xff0c;只說表面)&＃xff0c;就是 WXML(主要) &＃43; WXSS (美化) 實現的
這一篇&＃xff0c;我們主要涉及到的是 WXML 中例如數據綁定、或者運算等等&＃xff0c;但是學習之前&＃xff0c;很顯然&＃xff0c;我們需要認識幾個常見的標簽&＃xff0c;后面我們會總結一些常用的標簽&＃xff0c;下面會用到的有&＃xff1a;
、 > 還有一些標簽&＃xff0c;大家去看官網文檔就可以了&＃xff0c;寫的非常清楚&＃xff0c;我們這里重點還是說一下關于其中的一些標簽語法問題
官網——WXML語法文檔
https://developers.weixin.qq.com/miniprogram/dev/reference/wxml/
官網——組件文檔
https://developers.weixin.qq.com/miniprogram/dev/component/
??
??
view>
看一下效果
雖然還不涉及到什么頁面的美化&＃xff0c;以及復雜的標簽&＃xff0c;不過一個極為簡單的靜態頁面現在已經可以構造出來了&＃xff0c;歸根結底&＃xff0c;我們最后都是要進行前后臺數據的交互的&＃xff0c;而微信小程序就為我們提供了很多很好用的用法&＃xff0c;能很快的進行數據的綁定操作
有一個前提條件&＃xff0c;我們先模擬一些數據&＃xff0c;我們只需要在頁面的 js 文件中的 data對象中定義小程序初始化的數據&＃xff0c;例如下面代碼&＃xff0c;我們隨便拿一些常見的數據類型來模擬一下
Page({
??/**
???*?頁面的初始數據
???*/
??data:?{
????msg:?"你好&＃xff0c;微信小程序",
????status:?100,
????isLogin:?true,
????person:{
??????name:?"張三",
??????age:?22,
??????profession:?"student"
????},
????isChecked:?true
??},
})
如何在 WXML 標簽組件中進行數據的綁定其實是非常簡單的&＃xff0c;微信小程序中通過 {{}} 來解析剛才在 JS 中模擬的變量
要注意&＃xff1a;直接通過 {{}} 解析的變量都是 頁面 js 文件中 Page --> data 下的
A&＃xff1a;字符串
字符串內容直接用兩個大括號括住接收就可以了&＃xff0c;在上面我們有這樣的定義&＃xff1a;
msg: "你好&＃xff0c;微信小程序", 所以直接括住 msg 就可以獲取到后面的值了
B&＃xff1a;數值
數值也是一樣直接可以獲取
C&＃xff1a;布爾類型
布爾類型第一個代碼是直接打印出其布爾類型 true 或者 false
而下面配合 checkbox 就可以實現是否選中的效果
????
view>
D&＃xff1a;對象
對象這塊如果你直接打印 person 就會輸出一個 Object 類型&＃xff0c;所以如果想要拿到對象的屬性值&＃xff0c;一定要指定到具體的屬性
看一下上述所有的綁定效果
例如我們 view 組件的 id 值前綴是固定的 user- 后面就是用戶的序號&＃xff0c;這時候就可以通過變量來進行巧妙的解析到屬性中了
注&＃xff1a;不要輕易的亂加空格&＃xff0c;否則可能會讀取失敗例如&＃xff1a;
看一下 Wxml 的源碼 id 這個屬性中已經進行了拼接&＃xff0c;這種方式同樣還會常用在 class 或者 style 中&＃xff0c;配合三元運行能不錯的實現一些需求&＃xff0c;下面我們會提到
首先我們依舊定義一些數據&＃xff0c;三個整數&＃xff0c;和兩個字符串
Page({
??data:?{
????a:?11,
????b:?22,
????c:?33,
????msg:?"姓名",
????name:?"張三"
??},
})
直接在 {{}} 中進行 加減乘除等的運算&＃xff0c;直接就可以得到結算的結果&＃xff0c;例如&＃xff1a;
如果是字符串類型的數據&＃xff0c;利用 &＃43; 進行運算&＃xff0c;結果是一個拼接的效果
這個就是常見的 if 判斷&＃xff0c;例如使用 wx:if 這個屬性&＃xff0c;那么就只有在后面的表達式為 true 的情況下才會顯示文本 a 大于 0
三元運算的應用場景還是很多的(等式 ? : true情況&＃xff0c;false的情況)
三元補充&＃xff1a;
通過在屬性中解析變量的方式&＃xff0c;可以達到根據變量的值&＃xff0c;來指定不同的 class名&＃xff0c;以顯示不同的樣式
例如我們的 css 樣式是這樣的&＃xff0c;iconfont 是我們共用的&＃xff0c;所以直接寫在屬性中就可以了&＃xff0c;而究竟是用 ?icon-back 還是 icon-remove 就可以通過一個變量來操縱&＃xff0c;例如我們下面的 isClick 就是在 js 里 data 中定義的一個 布爾類型的變量
.iconfont?{......}
.icon-back:before?{......}
.icon-remove:before?{......}
當 isClick 為 true 就執行 class 就是這樣的 為 false 就是用另一個&＃xff0c;我們就可以通過 控制變量值來進行不同的顯示
看一下上述所有運算的執行結果(不含補充的結果) 依舊我們給一些模擬數據&＃xff0c;一個是 person 這樣的對象內部有一些屬性&＃xff0c;還有一個就是 studentList 學生集合&＃xff0c;其中有三個學生的數據 如果我們接受到了后臺的一些集合或者數組等內容&＃xff0c;循環遍歷是一個非常常用的操作 組件(標簽)上使用 先舉個例子 我們分別來解釋一下&＃xff1a; 如果你的數組只是一個普通的數組&＃xff0c;例如 如果傳這個 key 值&＃xff0c;會有一個警告彈出 如果你的循環只有一層&＃xff0c;那么 如果你的循環是一個嵌套的效果&＃xff0c;那么切記一定 item 和 index 的值一定不要重復… 嵌套的正確寫法 再舉一個例子(遍歷對象的所有屬性)&＃xff1a; 看一下執行效果 如果我們使用兩種不同的組件(標簽)看看最終渲染出來的結果有什么區別呢&＃xff1f; 方法一(view 標簽) 結果一 方法二(block 標簽) 結果二 通過控制臺中 Wxml 界面&＃xff0c;可以看到&＃xff0c;只有在 view 組件下遍歷內容時才真正的生成了 dom 結構&＃xff0c;而直接使用 block 則只是將內容重復寫了幾次&＃xff0c;不會變成真正的dom元素 這塊理解沒什么難點&＃xff0c;無非就是關于邏輯的幾種判斷&＃xff0c;看一個例子就清楚了 說明&＃xff1a;isLogin 是在 js 中模擬的一個數據&＃xff0c;分別賦予 true false 或者其他的 例如 null&＃xff0c;會根據邏輯值顯示不同的內容 補充用法(hidden)&＃xff1a; 通過上面的 if else 等可以控制組件例如 view 的顯示&＃xff0c;而有一個屬性 hidden 同樣可以實現根據邏輯值控制組件的顯示 例如給 hidden 傳入一個 false 就會顯示出來 那么既然一定程度上都可以達到這種效果&＃xff0c;我們選擇那個呢&＃xff1f; 先來看一下 看一下渲染出來的結構&＃xff0c;關于 所以&＃xff0c;當標簽不總是切換顯示的時候&＃xff0c;可以考慮先用 ? 模板的字面意思就是&＃xff0c;一個可以應用在多處&＃xff0c;通用的一個版塊&＃xff0c;如何去用呢&＃xff1f; 使用 name 屬性&＃xff0c;作為模板的名字。愛掏網 - it200.com然后在 我們需要在想引用模板的頁面中引入模板&＃xff0c;WXML 提供兩種文件引用方式 如果沒有效果&＃xff0c;可以看一下是不是路徑寫錯了&＃xff0c;要根據自己定義的來寫哦 這兩者的區別就是 import 有作用域的問題&＃xff0c;官網這里寫的挺清楚&＃xff0c;我直接貼一下&＃xff1a; import 有作用域的概念&＃xff0c;即只會 import 目標文件中定義的 template&＃xff0c;而不會 import 目標文件 import 的 template。愛掏網 - it200.com 如&＃xff1a;C import B&＃xff0c;B import A&＃xff0c;在C中可以使用B定義的 使用 is 屬性&＃xff0c;聲明需要的使用的模板&＃xff0c;也就是與上面的 name 一致就可以了&＃xff0c;然后將模板所需要的 data 傳入&＃xff0c;如(直接傳入)&＃xff1a; 賦值方式還有一種常用的 它的意思就是將調用這個模板頁面中的 student 對象變量賦值給這個模板&＃xff0c;三個點就是一個擴展運算符&＃xff0c;作用就是將這個student 對象展開 例如 郵箱&＃xff1a;ideal_bwh&＃64;163.com 如果能幫到你的話&＃xff0c;那就來關注我吧&＃xff01; 如果您更喜歡微信文章的閱讀方式&＃xff0c;可以關注我的公眾號 如果您更加喜歡PC端的閱讀方式&＃xff0c;可以訪問我的個人博客 域名&＃xff1a;www.ideal-20.cn 在這里的我們素不相識&＃xff0c;卻都在為了自己的夢而努力 ? 一個堅持推送原創開發技術文章的公眾號&＃xff1a;理想二旬不止
Page({
??data:?{
????person:{
??????pid:?1,
??????name:?"張三",
??????age:?22,
??????profession:?"student"
????},
????studentList:[{
????????sid:1,
????????name:"湯姆",
????????gender:"男"
??????},{
????????sid:2,
????????name:"杰克",
????????gender:"男"
??????},{
????????sid:3,
????????name:"瑪麗",
????????gender:"女"
??????}
????]
??},
})wx:for 就可以綁定一個數組或集合內容&＃xff0c;就可用數組中各項的數據重復渲染該組件
????
????????{{index}}?---?{{item.name}}?
????view>
view>
wx:for&＃xff1a;數組或者對象wx:for-item&＃xff1a;循環項(數組或集合)的變量名稱&＃xff0c;同時一般默認為 itemwx:for-index&＃xff1a;循環項(數組或集合)的索引(下標)&＃xff0c;同時一般默認為 indexwx:key&＃xff1a;綁定一個唯一的值&＃xff0c;可以提高列表渲染的性能&＃xff0c;可以簡單理解為主鍵的概念&＃xff0c;例如這里我傳入了 studentList 中不可能重復的值 sid[11,22,65,23,3,6] 沒有所謂唯一的值&＃xff0c;就可以使用 wx:key&＃61;"this"&＃96; 即表示你的數組是一個普通的數組&＃xff0c;&＃96;this 表示的是 item 本身
wx:for-item&＃61;"item" ?wx:for-index&＃61;"index" ?這兩個內容實際上是可以省略的&＃xff0c;小程序會自動把這兩個內容設置為 item 和 index
??
????
??????{{i}}?*?{{j}}?&＃61;?{{i?*?j}}
????view>
??view>
view>
????
????{{key}}?---?{{value}}?
????view>
view>
????{{key}}?---?{{value}}?
view>
????{{key}}?---?{{value}}?
block>pid?---?1?name?---?張三?age?---?22?profession?---?studenwx:if 的那塊直接就沒有渲染出來了&＃xff0c;只有 hidden 的那個&＃xff0c;由此可以得出&＃xff1a;
wx:if 是直接把標簽從頁面結構中移除掉了hidden 是通過添加樣式的方式的隱藏&＃xff0c;標簽結構還在wx:if &＃xff0c;標簽切換頻繁的時候用 hidden
內定義代碼片段
??
????
????
??view>
template>import 和 include template&＃xff0c;在B中可以使用A定義的template&＃xff0c;但是C不能使用A定義的template。愛掏網 - it200.comtemplate>Page({
??data:?{
????student:?{
??????id:?0,
??????name:?&＃39;張三&＃39;,
????}
??}
})
