WXSS樣式

WXSS（WeiXin Style Sheets）是一套用於小程序的樣式語言，用於描述WXML的組件樣式，也就是視覺上的效果。

WXSS與Web開發中的CSS類似為了更適合小程序開發，WXSS對CSS做了一些補充以及修改。

文件組成

項目公共樣式：根目錄中的app.wxss為項目公共樣式，它會被注入到小程序的每個頁面頁面樣式：與app.json注册過的頁面同名且位置同級的WXSS文件比如上圖注册了pages/rpx/index頁面，那pages/rpx/ index.wxss為頁面pages/rpx/index.wxml的樣式。

其它樣式：其它樣式可以被項目公共樣式和頁面樣式引用，引用方法查看本章中的 WXSS引用

在小程序開發中，開發者不需要像Web開發那樣去優化樣式文件的請求數量，只需要考慮代碼的單位即可樣式文件最終會被編譯優化，具體的編譯原理我們留在後面章節再做介紹。

尺寸單位

在WXSS中，引入了rpx（responsive pixel）尺寸單位引用新尺寸單位的目的是，適配不同寬度的荧幕，開發起來更簡單。

如下圖所示，同一個元素，在不同寬度的荧幕下，如果使用px為尺寸單位，有可能造成頁面留白過多。

修改為rpx尺寸單位，效果如下圖所示。

小程序編譯後，rpx會做一次px換算換算是以375個物理點數為基準，也就是在一個寬度為375物理點數的荧幕下，1rpx = 1px。

舉個例子：iPhone6荧幕寬度為375px，共750個物理點數，那麼1rpx = 375 / 750 px = 0.5px。

WXSS引用

在CSS中，開發者可以這樣引用另一個樣式文件： import url('./test_0.css')

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

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

@import './test_0.wxss'

由於WXSS最終會被編譯打包到目標文件中，用戶只需要下載一次，在使用過程中不會因為樣式的引用而產生多餘的文件請求。

內聯樣式

WXSS內聯樣式與Web開發一致：

<!--index.wxml-->
<!--Inline style-->
<view style="color: red; font-size: 48rpx"></view>

小程序支持動態更新內聯樣式：

<!--index.wxml-->

<!-- Dynamically changing inline styles-->
<!--
{
  eleColor: 'red',
  eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

選擇器。

現時支持的選擇器如下表所示。

類型

選擇器。

樣例

樣例描述

類選擇器

class

.intro

選擇所有擁有class='intro'的組件

id選擇器

#id

#firstname

選擇擁有id='firstname'的組件

元素選擇器

element

view checkbox

選擇所有文件的view組件和所有的checkbox組件

偽元素選擇器

::after

view::after

在view組件後邊插入內容

偽元素選擇器

::before

view::before

在view組件前邊插入內容

WXSS優先順序與CSS類似，權重如下圖所示。

權重越高越優先在優先順序相同的情况下，後設定的樣式優先順序高於先設定的樣式。

WXSS選擇器優先順序權重，代碼如下所示：

view{ // Weight is 1
  color: blue
}

.ele{ // Weight is 10
  color: red
}

#ele{ // Weight is 100
  color: pink
}

view#ele{ //Weight 1 + 100 = 101, highest priority, and element color is orange
  color: orange
}

view.ele{ // Weight is 1 + 10 = 11
  color: green
}

官方樣式庫

為了減輕開發者樣式開發的工作量，我們提供了WeUI.wxss基礎樣式庫。

WeUI是一套與Luffa原生視覺體驗一致的基礎樣式庫，由Luffa官方設計團隊為Luffa內網頁和Luffa小程序量身設計，令用戶的使用感知更加統一包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。