支付寶小程序框架 ACSS·語(yǔ)法參考

2020-09-18 10:29 更新

ACSS 是一套樣式語(yǔ)言,用于描述 AXML 的組件樣式,決定 AXML 的組件的顯示效果。

為適應(yīng)廣大前端開(kāi)發(fā)者,ACSS 和 CSS 規(guī)則完全一致,100% 可以用。同時(shí)為更適合開(kāi)發(fā)小程序,對(duì) CSS 進(jìn)行了擴(kuò)充,ACSS 支持 px,rpx,vh,vw 等單位。

ACSS 已經(jīng)幫開(kāi)發(fā)者做了不同手機(jī)端的樣式兼容性處理。

rpx

rpx(responsive pixel)可以根據(jù)屏幕寬度進(jìn)行自適應(yīng),規(guī)定屏幕寬為 750rpx。以 Apple iPhone6 為例,屏幕寬度為 375px,共有 750 個(gè)物理像素,則 750rpx = 375px = 750 物理像素,1rpx = 0.5px = 1 物理像素。

設(shè)備 rpx 換算 px(屏幕寬度 / 750) px 換算 rpx(750 / 屏幕寬度)
iPhone5 1rpx = 0.42px 1px = 2.34rpx
iPhone6 1rpx = 0.5px 1px = 2rpx
iPhone6 Plus 1rpx = 0.552px 1px = 1.81rpx

樣式導(dǎo)入

使用 @import 語(yǔ)句可以導(dǎo)入外聯(lián)樣式表,@import 后需要加上外聯(lián)樣式表相對(duì)路徑,用;表示結(jié)束。

示例代碼:

  1. /** button.acss **/
  2. .sm-button {
  3. padding: 5px;
  4. }
  5. /** app.acss **/
  6. @import "./button.acss";
  7. .md-button {
  8. padding: 15px;
  9. }

導(dǎo)入路徑支持從 node_modules 目錄載入第三方模塊,例如 page.acss:

  1. @import "./button.acss"; /*相對(duì)路徑*/
  2. @import "/button.acss"; /*項(xiàng)目絕對(duì)路徑*/
  3. @import "third-party/page.acss"; /*第三方 npm 包路徑*/

內(nèi)聯(lián)樣式

組件上支持使用 style、class 屬性來(lái)控制樣式。

style 屬性

用于接收動(dòng)態(tài)樣式,樣式在運(yùn)行時(shí)會(huì)進(jìn)行解析。行內(nèi)樣式不支持!important 優(yōu)先級(jí)規(guī)則。

  1. <view style="color:{{color}};" />

class 屬性

用于接收靜態(tài)樣式,屬性值是樣式規(guī)則中類(lèi)選擇器名(樣式類(lèi)名)的集合,樣式類(lèi)名不需要帶上.,多個(gè)類(lèi)名間以空格分隔。請(qǐng)靜態(tài)樣式寫(xiě)進(jìn) class 中,避免將靜態(tài)樣式寫(xiě)進(jìn) style 中,以免影響渲染速度。

  1. <view class="my-awesome-view" />

選擇器

同 CSS3 保持一致。

注意:

  • .a-, .am- 開(kāi)頭的類(lèi)選擇器為系統(tǒng)組件占用,不可使用。
  • 不支持屬性選擇器。

全局樣式與局部樣式

  • app.acss 中的樣式為全局樣式,作用于每一個(gè)頁(yè)面。
  • 頁(yè)面文件夾內(nèi)的 .acss 文件中定義的樣式為局部樣式,只作用在對(duì)應(yīng)的頁(yè)面,并會(huì)覆蓋 app.acss 中相同的選擇器。

本地資源引用

ACSS 文件里的本地資源引用請(qǐng)使用絕對(duì)路徑的方式,不支持相對(duì)路徑引用。例如:

  1. /* 支持 */
  2. background-image: url('/images/ant.png');
  3. /* 不支持 */
  4. background-image: url('./images/ant.png');

常見(jiàn)問(wèn)題

Q:一個(gè) axml 引用多個(gè)自定義組件或 template 模板、include 等,造成樣式之間相互影響、樣式污染怎么辦?

A:請(qǐng)開(kāi)發(fā)者自行通過(guò)名空間處理樣式隔離。

Q:給頁(yè)面設(shè)高度100%為什么沒(méi)用?

A:添加一個(gè)絕對(duì)定位就可以了,不添加的話,會(huì)根據(jù)您的頁(yè)面的內(nèi)容去自適應(yīng)的。

以上內(nèi)容是否對(duì)您有幫助:
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)