??? 微信小程序 專欄：小程序WXSS-WXML-WXS
????? 個(gè)人簡介：一個(gè)不甘平庸的平凡人??? 個(gè)人主頁：CoderHing的個(gè)人主頁
?? 格言: ?? 路漫漫其修遠(yuǎn)兮,吾將上下而求索??
?? 你的一鍵三連是我更新的最大動(dòng)力??
目錄
一、WXSS編寫程序樣式
小程序的樣式寫法
WXSS支持的選擇器
WXSS優(yōu)先級與CSS類似，權(quán)重如圖
wxss的拓展 - 尺寸單位
二、Mustache語法綁定
Mustache語法
三、WXML的條件渲染
邏輯判斷 wx:if - wx:elif - wx:else
hidden屬性
四、WXML的列表渲染
列表渲染 - wx:for 基礎(chǔ)
block標(biāo)簽
列表渲染 - item / index 名稱
列表渲染 - key作用
五、WXS語法基本使用
什么是WXS?
WXS的寫法
一、WXSS編寫程序樣式
小程序的樣式寫法
- 頁面樣式的三種寫法:
- 行內(nèi)樣式、頁面樣式、全局樣式
- 三種樣式都可以作用于頁面的組件
- 如果有相同的樣式 那么優(yōu)先級如下:
- 行內(nèi)樣式 > 頁面樣式 > 全局樣式
| JavaScript |
WXSS支持的選擇器
目前支持的選擇器:
?
WXSS優(yōu)先級與CSS類似，權(quán)重如圖
跟Css一樣(依然有權(quán)重)
wxss的拓展 - 尺寸單位
跟Css中最大的區(qū)別!
- 尺寸單位
- rpx(responsive pixel):可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),規(guī)定屏幕寬為750rpx
- 如在Iphone6上,屏幕寬為375px 共有750物理像素,則750rpx=375px=750物理像素
- 1rpx = 0.5px = 1物理像素
注:開發(fā)微信小程序時(shí)設(shè)計(jì)師可以用Iphone6作為視覺稿的標(biāo)準(zhǔn)
二、Mustache語法綁定
Mustache語法
- WXML基本格式:
- 類似于HTML代碼,可以寫成 單標(biāo)簽 也可以寫成 雙標(biāo)簽
- 必須有 嚴(yán)格的閉合: 沒有閉合會(huì)導(dǎo)致編譯錯(cuò)誤
- 大小寫敏感:class和Class是不同的屬性
- 開發(fā)中,界面上展示的數(shù)據(jù)并不是寫死的,會(huì)根據(jù)服務(wù)器返回的數(shù)據(jù),或用戶的操作來改變
- 如使用原生Js或Jq的話,需要通過操作DOM來進(jìn)行界面的更新
- 小程序和Vue一樣,提供插值語法:Mustache語法(雙大括號)
?
三、WXML的條件渲染
邏輯判斷 wx:if - wx:elif - wx:else
- 在某些需求中,我們需要根據(jù)條件來決定一些內(nèi)容是否渲染:
- 當(dāng)條件為true時(shí), view組件會(huì)渲染出來
- 當(dāng)條件為false時(shí), view組件不會(huì)渲染出來
hidden屬性
- hidden屬性:
- hidden是所有組件都默認(rèn)擁有的屬性
- 當(dāng)hidden屬性為true時(shí),組件隱藏
- 為false時(shí),組件顯示出來
| JavaScript |
?
- hidden和wx:if的區(qū)別
- hidden控制顯示和隱藏,是控制是否添加hidden屬性
- wx:if是控制組件是否被渲染
四、WXML的列表渲染
列表渲染 - wx:for 基礎(chǔ)
- 為什么需要使用wx:for
- 在實(shí)際開發(fā)中,服務(wù)器經(jīng)常返回各種 列表數(shù)據(jù)?我們不可能一一從列表中取出數(shù)據(jù)進(jìn)行展示;
- 所以我們需要通過 for循環(huán)的方式,遍歷所有數(shù)據(jù),一次性進(jìn)行展示;
- 在組件中,可以使用wx:for來遍歷一個(gè)數(shù)組(字符串 - 數(shù)字)
- 默認(rèn)情況下,遍歷后在wxml中可以使用一個(gè) 變量index,保存的當(dāng)前遍歷數(shù)據(jù)的下標(biāo)值
- 數(shù)組中對應(yīng)某項(xiàng)的數(shù)據(jù),使用 變量名item獲取
| JavaScript |
block標(biāo)簽
- 什么是block標(biāo)簽? => 類似于 Vue中的 template
- 在一些情況下,我們使用wx:if 或 wx:for時(shí),可能需要包裹一組 組件標(biāo)簽
- 我們希望對這一組組件標(biāo)簽進(jìn)行整體的操作,這個(gè)時(shí)候怎么辦?
- 注:
- <block /> 并不是一個(gè)組件,它僅僅是一個(gè) 包裝元素 不會(huì)在頁面中做任何渲染 只接受控制
- 使用block有兩個(gè)好處:
- 將需要進(jìn)行遍歷或判斷的內(nèi)容進(jìn)行包裹
- 將遍歷和判斷的屬性放在block標(biāo)簽中,不影響普通屬性的閱讀,提高代碼的可讀性.
?
列表渲染 - item / index 名稱
- 默認(rèn)情況下,item - index 的名字是固定的
- 但在某些情況下,我們可能想要使用其他名稱
- 或者出現(xiàn)多層遍歷時(shí),名字重復(fù)
- 這個(gè)時(shí)候,我們可以指定item和index的名稱:
?
| JavaScript |
列表渲染 - key作用
- 我們看到,當(dāng)使用wx:for時(shí),會(huì)報(bào)一個(gè)警告:
- 我們可以添加 key來提供性能
- 為什么需要這個(gè)key屬性?
- 其實(shí)和小程序內(nèi)部 也使用了 虛擬DOM有關(guān)系(和Vue React很相似)
- 當(dāng)某曾有很多相同的節(jié)點(diǎn)時(shí),(也就是列表節(jié)點(diǎn)時(shí))我們希望 插入 刪除一個(gè)新的節(jié)點(diǎn) 可以更好的復(fù)用節(jié)點(diǎn)
- wx:key的值以兩種形式提供
- 字符串, 代表在 for循環(huán)的array中 item的某個(gè)property,該property的值需要是列表中唯一的字符串或數(shù)字,并且不能動(dòng)態(tài)進(jìn)行改變
- 保留關(guān)鍵字 *this?代表在for循環(huán)中的item本身,這種表示需要 item本身是一個(gè)唯一的字符串或數(shù)字
五、WXS語法基本使用
什么是WXS?
- WXS(weixin Script) 是小程序的一套腳本語言,結(jié)合WXML 可以構(gòu)建出頁面的結(jié)構(gòu).
- 官方:WXS與Js是不同的語言,有自己的語法,并不和Js一致(不過基本一致)
- 為什么要設(shè)計(jì)WXS語言?
- 在WXML中是不能直接調(diào)用Page/Component中定義的函數(shù)的
- 但在某些情況,我們可以希望使用函數(shù)來處理WXML中的數(shù)據(jù)(類似于Vue中的過濾器)這個(gè)時(shí)候就使用WXS
- WXS使用的限制和特點(diǎn):
- WXS不依賴于運(yùn)行時(shí)的基礎(chǔ)庫版本,可以在所有版本的小程序中運(yùn)行
- WXS的運(yùn)行環(huán)境和其他Js代碼是隔離的,WXS中不能調(diào)用其他Js文件中定義的函數(shù),也不能調(diào)用小程序提供的API.
- 由于運(yùn)行環(huán)境的差異,在IOS設(shè)備上小程序內(nèi)的WXS會(huì)比Js代碼快2~20倍,在安卓設(shè)備商 運(yùn)行效率無明顯差異
WXS的寫法
- WXS有兩種寫法:
- 在<wxs>標(biāo)簽中
- 在以.wxs結(jié)尾的文件中
- <WXS>標(biāo)簽的屬性:
?
- 每一個(gè).wxs文件和<wxs>標(biāo)簽都是一個(gè)單獨(dú)的模塊
- 每個(gè)模塊有自己的獨(dú)立作用域.在每個(gè)模塊里面定義的變量與函數(shù),默認(rèn)為私有的.對其他模塊不可見
- 一個(gè)模塊如果想要向外暴露其內(nèi)部的私有變量和函數(shù),只能通過 module.exports?實(shí)現(xiàn)
| 方式一: wxs標(biāo)簽寫法
|
方式二: .wxs文件寫法
?文章來源：http://www.zghlxwxcb.cn/news/detail-818507.html
|
到了這里，關(guān)于微信小程序 | 小程序WXSS-WXML-WXS的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
