codecamp

支付宝小程序框架 样式·acss

acss(AntFinancial Style Sheet)用于描述页面的样式。它是一套样式语言,用于描述 axml 的组件样式,决定 axml 的组件应该怎么显示。

为了适应广大的前端开发者,我们的 acss 具有 css 大部分特性。同时为了更适合开发小程序,我们对 css 进行了扩充。

与 css 相比我们扩展的特性有:

(1)rpx

rpx(responsive pixel)可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。

设备 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

(2)样式导入

使用@import语句可以导入外联样式表,@import后跟需要导入的外联样式表的相对路径,用;表示语句结束。

示例代码如下。

/** button.acss **/
.sm-button {
  padding:5px;
}

/** app.acss **/
@import "./button.acss";
.md-button {
  padding:15px;
}

导入路径支持从 node_modules 目录载入第三方模块,例如 page.acss:

@import "./button.acss"; /*相对路径*/
@import "/button.acss"; /*项目绝对路径*/
@import "third-party/button.acss"; /*第三方 npm 包路径*/

(3)内联样式

框架组件上支持使用styleclass属性来控制组件的样式。

style属性:静态的样式统一写到class中。style接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进style中,以免影响渲染速度。

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

class属性:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上.,样式类名之间用空格分隔。

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

(4)选择器

同 css3 保持一致,注意点:

  • .a-, .am- 开头的类选择器为系统组件占用,请不要使用
  • 不支持属性选择器

(5)全局样式与局部样式

定义在app.acss中的样式为全局样式,作用于每一个页面。在 Page 的acss文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖app.acss中相同的选择器。

(6)页面容器样式

可以通过 page 元素选择器设置页面容器的样式,比如页面背景色:

page {
  background-color: red;
}
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }