微信小程式開發 學習筆記 3 WXSS樣式

2022-03-11 08:19:05 字數 1647 閱讀 7542

wxss(weixin style sheets)是一套用於小程式的樣式語言,用於描述wxml的元件樣式,也就是視覺上的效果。

wxss與web開發中的css類似。為了更適合小程式開發,wxss對css做了一些補充以及修改

其它樣式:其它樣式可以被專案公共樣式和頁面樣式引用

在小程式開發中,開發者不需要像web開發那樣去優化樣式檔案的請求數量,只需要考慮**的組織即可。樣式檔案最終會被編譯優化,具體的編譯原理我們留在後面章節再做介紹。

在wxss中,引入了rpx(responsive pixel)尺寸單位。引用新尺寸單位的目的是,適配不同寬度的螢幕,開發起來更簡單

傳統的px單位在不同的解析度螢幕下顯示效果差別很大:

採用rpx後不同解析度下顯示效果相同:

小程式編譯後,rpx會做一次px換算。換算是以375個物理畫素為基準,也就是在乙個寬度為375物理畫素的螢幕下,1rpx = 1px

舉個例子:iphone6螢幕寬度為375px,共750個物理畫素,那麼1rpx = 375 / 750 px = 0.5px。

在css中,開發者可以這樣引用另乙個樣式檔案:@import url('./test_0.css')

這種方法在請求上不會把test_0.css合併到index.css中,也就是請求index.css的時候,會多乙個test_0.css的請求。

在小程式中,我們依然可以實現樣式的引用,樣式引用是這樣寫:

動態改變樣式

我們定義了乙個view元素,顏色是動態獲取的,即data裡面的elecolor,所以初始化為紅色,我們又定義了乙個按鈕,單擊後會修改elecolor的值。

當我們單擊按鈕後,view會由以前的紅色變成藍色,記住這裡的更新是由小程式框架動態實現的!

wxss的優先順序與css優先順序相似。權重越高越優先。在優先順序相同的情況下,後設定的樣式優先順序高於先設定的樣式。

view

.ele

#ele

view#ele

view.ele

微信小程式 wxs

wxs weixin script 是小程式的一套指令碼語言,結合wxml,可以構建出頁面的結構。wxs可以說就是為了滿足能在頁面中使用js存在的,在wxml頁面中,只能在插值 中寫簡單的js表示式,而不能呼叫方法,例如想取出乙個字串的最後一位,就不能呼叫slice 方法。通常的解決辦法是在page...

四 微信小程式WXS

rpx responsive pixel 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在iphone6上,螢幕寬度為375px,共有750個物理畫素,則750rpx 375px 750物理畫素,1rpx 0.5px 1物理畫素。裝置rpx換算px 螢幕寬度 750 px換算rpx 750...

微信小程式wxs的使用

先上官方文件 在開發中常用作過濾器,像vue的filter,廢話不說,上 對字串進行分隔程陣列,用在xml的迴圈展示 var msplit function str return str.split 複製 如何使用?新建wxs檔案,複製上面 記得將方法匯出,這樣在wxml裡面才能引入,上 modul...