關(guān)于.acss文件

在視頻中已經(jīng)說過了，小程序的設(shè)計(jì)思想和原生app的設(shè)計(jì)思想頗為相似，基本的應(yīng)用單元為頁面。當(dāng)然對于一個(gè)頁面來說每一個(gè)元素的放置位置在哪兒以及顯示成什么樣子這個(gè)是由樣式來決定的。我們知道在web開發(fā)中樣式是在css文件中規(guī)定的，叫做層疊樣式表 (Cascading Style Sheets)。其實(shí)在APP中樣式的約束也是使用css，在支付寶小程序中也是使用css不過文件的后綴是.acss而且對css3進(jìn)行了擴(kuò)充而已。

CSS3是CSS技術(shù)的升級版本，CSS3語言開發(fā)是朝著模塊化發(fā)展的。以前的規(guī)范作為一個(gè)模塊實(shí)在是太龐大而且比較復(fù)雜，所以，把它分解為一些小的模塊，更多新的模塊也被加入進(jìn)來。這些模塊包括： 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字特效 、多欄布局等。

那么在支付寶小程序中的.acss和微信小程序中的.wxcss沒有什么兩樣。上邊已經(jīng)說了.acss其實(shí)包含了css3那么它還有一些新的特性是css3中不具備的，讓我們一一看看

rpx

第一次看到這個(gè)東西也能猜到他是干什么用的。在css中我們知道規(guī)定大小一般使用像素(px)這個(gè)單位。比如顯示生活中我們說房子128㎡那這兒的單位是平方米，在開發(fā)中需要更加精準(zhǔn)的大小就是px像素。像素就非常精細(xì)了因?yàn)樵谖覀冿@示屏幕中像素是最小的顯示單元。這個(gè)道理如果不懂的話就找個(gè)LED屏幕仔細(xì)看，LED屏幕上一個(gè)一個(gè)的發(fā)光二極管可以想象為像素。

px為單位導(dǎo)致的問題

我們知道手機(jī)屏幕有大有小，就拿iPhone來說，iPhone 6 plus比iPhone 5要大。那么就說明plus的像素比5要多。對比：

iPhone 6 plus和iPhone5的尺寸對比

手機(jī)	寬度	高度
手機(jī)	寬度	高度
iPhone 6 plus	414px	736px
iPhone 5	320px	568px

加入有一個(gè)160px寬度的紅色矩形在這兩種手機(jī)中的位置如下：

那么rpx的特殊之處在哪兒呢？

rpx（responsive pixel）可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。如何自適應(yīng)呢？看下邊的分析：

不管一個(gè)屏幕有多寬我們可以對屏幕平均分配吧。既然iPhone 6 plus寬度為414px，iPhone 5的寬度為320px。如果創(chuàng)建一個(gè)寬度為160px的矩形那么在iPhone 5 中占有一半的寬度，但是在iPhone 6 plus中不足一半，在手機(jī)顯示中不是很好看。那么我們不管屏幕多寬都給他分750份。那么在iPhone 6 plus中每一份就是414/750=0.552px 而對于iPhone 5的每一份就是320/750=0.42px。那現(xiàn)在我們規(guī)定大小和位置時(shí)不使用px而使用份數(shù)來表示如何呢？比如我們規(guī)定一個(gè)紅色的矩形在iPhone 6 plus中占有375份(375x0.552=207px)，在iPhone 5中也是325份(375x0.42=157.5px)。 
再來看看，都占有375份的情況下iPhone 6 plus中的寬度207px（約占有總寬度414px的50%），而iPhone 5中的寬度157.5px（約占有總寬度320的50%）。也就是在兩個(gè)不同尺寸的屏幕上當(dāng)以份數(shù)來規(guī)定是占有的比例是差不多的。而這個(gè)份數(shù)就是rpx

看下圖：

樣式導(dǎo)入

在模塊化開發(fā)中我們有時(shí)候不得不在頁面中使用其他的第三方庫的樣式，而第三方庫的樣式是保存在第三方包中的，我們不可能全部復(fù)制到我們的.acss文件中，那最好的辦法就是導(dǎo)入了。在樣式表中導(dǎo)入其他外聯(lián)樣式表。

@import "./button.acss";
.md-button {
  padding:15px;
}
1
2
3
4

當(dāng)然仍舊支持內(nèi)聯(lián)樣式和class屬性制定樣式類，如

<view class="my-awesome-view" />
<view class="my-awesome-view" style="color:red;" />
1
2

選擇器

選擇器和css3的保持一致。一般有class=”test”類選擇器和id=”test”的id選擇器。當(dāng)然在支付寶小程序的樣式中特殊的地方就是： 
※ .a- 或者 .am-為前綴的選擇器已經(jīng)被系統(tǒng)占用所以不要使用； 
※ 不能使用屬性選擇器，例如,以下寫法不被支持：

//這種選擇器不被支持
input[name="title"]{
    color: test;
}
1
2
3
4

全局樣式與局部樣式

在項(xiàng)目結(jié)構(gòu)講解時(shí)我們已經(jīng)說過在項(xiàng)目根目錄下有一個(gè)app.acss文件這個(gè)樣式文件中定義的樣式在任何一個(gè)頁面中都可以直接使用。

頁面容器的樣式

我之前說過小程序開發(fā)的應(yīng)用單元為頁面。其實(shí)我們在.axml中寫的頁面并不包含頁面容器，就相當(dāng)于我們做一個(gè)頁面但是body標(biāo)簽不用寫那如果我們要改變整個(gè)頁面的背景怎么辦呢?其實(shí)有一個(gè)固定的選擇器。例如：

可以通過 page 元素選擇器來設(shè)置頁面容器的樣式，比如頁面背景色:

page {
  background-color: red;
}
1
2
3

在你想改變頁面容器的頁面中定義該樣式也可以，全局定義也可以，例如我想將test這個(gè)頁面的頁面容器背景設(shè)置為藍(lán)色，就可以再pages目錄下的test目錄下找到test.acss在其中定義page的樣式

下節(jié)是視圖層講解，如果有任何問題可以再下方給我留言或者發(fā)郵件到[email protected]我在收到郵件后會(huì)回復(fù)。