小程序模板網(wǎng)

一斤代碼深入理解系列《二》:微信小程序樣式機(jī)制

發(fā)布時(shí)間:2018-03-24 15:23 所屬欄目:小程序開發(fā)教程

之前,我已經(jīng)介紹過在小程序開發(fā)中使用WXML來做界面布局,但是WXML只是一個(gè)界面的骨架。要讓我們的小程序變得精致漂亮高大上起來,就需要一種為其添加樣式的機(jī)制。小程序的開發(fā)框架采用了與Web開發(fā)中所使用的CSS(層 ...

 
 
 

之前,我已經(jīng)介紹過在小程序開發(fā)中使用WXML來做界面布局,但是WXML只是一個(gè)界面的骨架。要讓我們的小程序變得精致漂亮高大上起來,就需要一種為其添加樣式的機(jī)制。小程序的開發(fā)框架采用了與Web開發(fā)中所使用的CSS(層疊樣式表)幾乎相同的一種機(jī)制,稱作WXSS。

WXSS用于描述WXML的組件樣式,用于決定WXML的組件應(yīng)該如何顯示。為了適應(yīng)廣大的前端開發(fā)者,它被設(shè)計(jì)為支持CSS中大部分的特性(但是注意是大部分,還是有一些特性是不支持的),并且有一些自己的擴(kuò)展和修改。比如引入了一種新的尺寸單位rpx,還有@import這種外聯(lián)樣式的導(dǎo)入機(jī)制(話說這個(gè)功能不是CSS里也有的么...)

關(guān)于CSS,我就不在這里介紹它的用法了,這個(gè)內(nèi)容實(shí)在有點(diǎn)多,還沒學(xué)習(xí)過CSS的朋友可以自己找一下資料學(xué)習(xí),我在這里主要想講解一下WXSS和CSS之間的不同之處。

樣式的設(shè)置

在WXML文件中,我們可以通過style和class屬性為組件設(shè)置樣式。不過由于WXML的數(shù)據(jù)綁定功能的存在,我們就可以動(dòng)態(tài)的設(shè)置style和class的屬性值了。比如:

<view style="color:{{color}};padding:{{padding}};">Hello</view>
<view class="message-{{type}}">{{message}}</view>

不過,我們要盡量避免使用style來設(shè)置組件的樣式,最好將樣式定義成樣式規(guī)則放到樣式文件中(.wxss),然后通過class屬性來設(shè)置。因?yàn)榻M件通過style接收動(dòng)態(tài)樣式,在運(yùn)行時(shí)會(huì)進(jìn)行解析,影響渲染性能。

有限的選擇器

和CSS不一樣,小程序的WXSS支持的選擇器的類型有限,官方文檔中明確列出說支持的,目前只有以下幾種選擇器:

  • .class:類選擇器,例如.error-msg,它會(huì)選擇所有class="error-msg"的組件
  • #id:ID選擇器,例如#my-container,它會(huì)選擇id="my-container"的組件
  • element:元素選擇器,例如view,它會(huì)選擇所有view組件
  • element, element:多選擇器,例如view, button,它會(huì)選擇所有view和button組件
  • ::after:例如view::after,它會(huì)在view組件后面插入內(nèi)容
  • ::before:例如view::after,它會(huì)在view組件前面插入內(nèi)容

其實(shí)自己試了一些在CSS中可用,小程序官方?jīng)]有聲明在WXSS里支持的選擇器,也是可以生效的。但是有些用了就會(huì)把微信web開發(fā)者工具給整崩潰掉,所以,還是不要在實(shí)際開發(fā)中使用這類沒說支持的選擇器了,雖然在有的場(chǎng)景下麻煩了點(diǎn),但是以上支持了的選擇器還是基本夠用了。

全局樣式與局部樣式

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

定義在app.wxss文件中的樣式為全局樣式,將會(huì)對(duì)每一個(gè)頁(yè)面起作用。

而定義為page同名的wxss文件,則稱為局部樣式,只會(huì)針對(duì)對(duì)應(yīng)的頁(yè)面起作用,而且樣式優(yōu)先級(jí)比全局樣式要高,可以覆蓋全局樣式。

新的尺寸單位

最后來說一下WXSS中新增和擴(kuò)展的尺寸單位,對(duì)于做屏幕的自適應(yīng)是非常有幫助的。

  • rpx (responsive pixel,響應(yīng)式px),簡(jiǎn)單來說,就是不管什么尺寸的設(shè)備,總是認(rèn)為屏幕寬度是750rpx
  • rem (root em,根em),也很簡(jiǎn)單,就是不管什么尺寸的設(shè)備,總是認(rèn)為屏幕的寬度是20rem。

所以rpx和rem之間的換算,就是:

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

設(shè)計(jì)師的設(shè)計(jì)稿一般都是按照px來做單位的,那么在開發(fā)階段,開發(fā)人員就需要在px和rpx之間進(jìn)行換算,具體可以如下來計(jì)算:

rpx = (屏幕實(shí)際寬度/750)px
px = (750/屏幕實(shí)際寬度)rpx

因此,如果設(shè)計(jì)師的設(shè)計(jì)是以iphone6屏幕尺寸為參照(iphone6的屏幕寬度為375px),則:

1rpx = (375/750)px = 0.5px
1px = (750/375)rpx = 2rpx

是不是很容易理解?

好了,關(guān)于微信小程序樣式WXSS的關(guān)鍵點(diǎn)內(nèi)容,就講解到這里,不對(duì)的地方歡迎指正。謝謝啦。



本文地址:http://22321a.com/wxmini/doc/course/22853.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢