微信小程式的樣式機制

之前，我已經介紹過在小程式開發中使用WXML來做界面布局，但是WXML隻是一個界面的骨架。要讓我們的小程式變得精緻漂亮高大上起來，就需要一種為其添加樣式的機制。小程式的開發架構采用了與Web開發中所使用的CSS（層疊樣式表）幾乎相同的一種機制，稱作WXSS。

WXSS用于描述WXML的元件樣式，用于決定WXML的元件應該如何顯示。為了适應廣大的前端開發者，它被設計為支援CSS中大部分的特性（但是注意是大部分，還是有一些特性是不支援的），并且有一些自己的擴充和修改。比如引入了一種新的尺寸機關rpx，還有@import這種外聯樣式的導入機制（話說這個功能不是CSS裡也有的麼...）

關于CSS，我就不在這裡介紹它的用法了，這個内容實在有點多，還沒學習過CSS的朋友可以自己找一下資料學習，我在這裡主要想講解一下WXSS和CSS之間的不同之處。

樣式的設定

在WXML檔案中，我們可以通過style和class屬性為元件設定樣式。不過由于WXML的資料綁定功能的存在，我們就可以動态的設定style和class的屬性值了。比如：

<view style="color:{{color}};padding:{{padding}};">Hello</view>
           

<view class="message-{{type}}">{{message}}</view>
           

不過，我們要盡量避免使用style來設定元件的樣式，最好将樣式定義成樣式規則放到樣式檔案中(.wxss)，然後通過class屬性來設定。因為元件通過style接收動态樣式，在運作時會進行解析，影響渲染性能。

有限的選擇器

和CSS不一樣，小程式的WXSS支援的選擇器的類型有限，官方文檔中明确列出說支援的，目前隻有以下幾種選擇器：

• .class：類選擇器，例如.error-msg，它會選擇所有class="error-msg"的元件
• #id：ID選擇器，例如#my-container，它會選擇id="my-container"的元件
• element：元素選擇器，例如view，它會選擇所有view元件
• element, element：多選擇器，例如view, button，它會選擇所有view和button元件
• ::after：例如view::after，它會在view元件後面插入内容
• ::before：例如view::after，它會在view元件前面插入内容

其實自己試了一些在CSS中可用，小程式官方沒有聲明在WXSS裡支援的選擇器，也是可以生效的。但是有些用了就會把微信web開發者工具給整崩潰掉，是以，還是不要在實際開發中使用這類沒說支援的選擇器了，雖然在有的場景下麻煩了點，但是以上支援了的選擇器還是基本夠用了。

全局樣式與局部樣式

WXSS中有全局樣式與局部樣式之分。

定義在app.wxss檔案中的樣式為全局樣式，将會對每一個頁面起作用。

而定義為page同名的wxss檔案，則稱為局部樣式，隻會針對對應的頁面起作用，而且樣式優先級比全局樣式要高，可以覆寫全局樣式。

新的尺寸機關

最後來說一下WXSS中新增和擴充的尺寸機關，對于做螢幕的自适應是非常有幫助的。

• rpx (responsive pixel，響應式px)，簡單來說，就是不管什麼尺寸的裝置，總是認為螢幕寬度是750rpx
• rem (root em，根em)，也很簡單，就是不管什麼尺寸的裝置，總是認為螢幕的寬度是20rem。

是以rpx和rem之間的換算，就是：

1rem = (750/20)rpx = 37.5rpx
```

設計師的設計稿一般都是按照px來做機關的，那麼在開發階段，開發人員就需要在px和rpx之間進行換算，具體可以如下來計算：
```
rpx = (螢幕實際寬度/750)px
 px = (750/螢幕實際寬度)rpx
```

是以，如果設計師的設計是以iphone6螢幕尺寸為參照(iphone6的螢幕寬度為375px)，則：
```
1rpx = (375/750)px = 0.5px
 1px = (750/375)rpx = 2rpx
```
是不是很容易了解？

好了，關于微信小程式樣式WXSS的關鍵點内容，就講解到這裡，不對的地方歡迎指正。謝謝啦。