支付宝小程序PHP全栈开发--前端样式的设计.acss样式详解

关于.acss文件

在视频中已经说过了,小程序的设计思想和原生app的设计思想颇为相似,基本的应用单元为页面。当然对于一个页面来说每一个元素的放置位置在哪儿以及显示成什么样子这个是由样式来决定的。我们知道在web开发中样式是在css文件中规定的,叫做层叠样式表 (Cascading Style Sheets)。其实在APP中样式的约束也是使用css,在支付宝小程序中也是使用css不过文件的后缀是.acss而且对css3进行了扩充而已。

CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。

那么在支付宝小程序中的.acss和微信小程序中的.wxcss没有什么两样。上边已经说了.acss其实包含了css3那么它还有一些新的特性是css3中不具备的,让我们一一看看

rpx

第一次看到这个东西也能猜到他是干什么用的。在css中我们知道规定大小一般使用像素(px)这个单位。比如显示生活中我们说房子128㎡那这儿的单位是平方米,在开发中需要更加精准的大小就是px像素。像素就非常精细了因为在我们显示屏幕中像素是最小的显示单元。这个道理如果不懂的话就找个LED屏幕仔细看,LED屏幕上一个一个的发光二极管可以想象为像素。

px为单位导致的问题

我们知道手机屏幕有大有小,就拿iPhone来说,iPhone 6 plus比iPhone 5要大。那么就说明plus的像素比5要多。对比:
iPhone 6 plus和iPhone5的尺寸对比

手机 宽度 高度
iPhone 6 plus 414px 736px
iPhone 5 320px 568px

加入有一个160px宽度的红色矩形在这两种手机中的位置如下:

*那么rpx的特殊之处在哪儿呢?

rpx(responsive pixel)可以根据屏幕宽度进行自适应。如何自适应呢?看下边的分析:
不管一个屏幕有多宽我们可以对屏幕平均分配吧。既然iPhone 6 plus宽度为414px,iPhone 5的宽度为320px。如果创建一个宽度为160px的矩形那么在iPhone 5 中占有一半的宽度,但是在iPhone 6 plus中不足一半,在手机显示中不是很好看。那么我们不管屏幕多宽都给他分750份。那么在iPhone 6 plus中每一份就是414/750=0.552px 而对于iPhone 5的每一份就是320/750=0.42px。那现在我们规定大小和位置时不使用px而使用份数来表示如何呢?比如我们规定一个红色的矩形在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%)。也就是在两个不同尺寸的屏幕上当以份数来规定是占有的比例是差不多的。
而这个份数就是rpx*

看下图:

g

样式导入
在模块化开发中我们有时候不得不在页面中使用其他的第三方库的样式,而第三方库的样式是保存在第三方包中的,我们不可能全部复制到我们的.acss文件中,那最好的办法就是导入了。在样式表中导入其他外联样式表。

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

当然仍旧支持内联样式和class属性制定样式类,如

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

选择器

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是: ※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用; ※ 不能使用属性选择器,例如,以下写法不被支持:

//这种选择器不被支持
input[name="title"]{
    color: test;
}

全局样式与局部样式

在项目结构讲解时我们已经说过在项目根目录下有一个app.acss文件这个样式文件中定义的样式在任何一个页面中都可以直接使用。

页面容器的样式

我之前说过小程序开发的应用单元为页面。其实我们在.axml中写的页面并不包含页面容器,就相当于我们做一个页面但是body标签不用写那如果我们要改变整个页面的背景怎么办呢?其实有一个固定的选择器。例如:可以通过 page 元素选择器来设置页面容器的样式,比如页面背景色:

page {
  background-color: red;
}

在你想改变页面容器的页面中定义该样式也可以,全局定义也可以,例如我想将test这个页面的页面容器背景设置为蓝色,就可以再pages目录下的test目录下找到test.acss在其中定义page的样式

原文地址:http://www.wxapp-union.com/portal.php?mod=view&aid=2979

时间: 2024-10-14 05:08:07

支付宝小程序PHP全栈开发--前端样式的设计.acss样式详解的相关文章

小程序的全栈开发新时代

欢迎大家前往腾讯云+社区,获取更多腾讯海量技术实践干货哦~ 本文由heyli发表于云+社区专栏 什么是小程序·云开发 小程序·云开发是微信团队和腾讯云团队共同研发的一套小程序基础能力,简言之就是:云能力将会成为小程序的基础能力.整套功能是基于腾讯云全新推出的云开发(Tencent Cloud Base)所研发出来的一套完备的小程序后台开发方案. 小程序·云开发为开发者提供完整的云端流程,简化后端开发和运维概念,无需搭建服务器,使用平台提供的 API 进行核心业务开发,即可实现快速上线和迭代. 该

“全栈2019”Java第二十八章:数组详解(上篇)

难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第二十八章:数组详解(上篇) 下一章 "全栈2019"Java第二十九章:数组详解(中篇) 学习小组 加入同步学习小组,共同交流与进步. 方式一:关注头条号Gorhaf,私信"Java学习小组". 方式二:关注公众号Gorhaf,回复"Java学习小组"

“全栈2019”Java第三十章:数组详解(下篇)

难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java第三十章:数组详解(下篇) 下一章 "全栈2019"Java第三十一章:二维数组和多维数组详解 学习小组 加入同步学习小组,共同交流与进步. 方式一:关注头条号Gorhaf,私信"Java学习小组". 方式二:关注公众号Gorhaf,回复"Java学习小组&qu

“全栈2019”Java异常第二十章:自定义异常详解

难度 初级 学习时间 10分钟 适合人群 零基础 开发语言 Java 开发环境 JDK v11 IntelliJ IDEA v2018.3 文章原文链接 "全栈2019"Java异常第二十章:自定义异常详解 下一章 "全栈2019"Java异常第二十一章:finally不被执行的情况 学习小组 加入同步学习小组,共同交流与进步. 方式一:关注头条号Gorhaf,私信"Java学习小组". 方式二:关注公众号Gorhaf,回复"Java学

2018-07-03-Python全栈开发day24-面向对象设计

面向对象: 根据现实中存在的东西,模拟出其特征,用来描述特定对象. 1.用函数来完成面向对象 1 def school(name,addr):#学校具有名称和地址 2 def dict_(name,addr): 3 dict_={ 4 'name':name, 5 'addr':addr, 6 'kao_shi':kao_shi,#当选取对应的key值时,运行这个函数 7 'zhao_sheng':zhao_sheng 8 } 9 return dict_ 10 def kao_shi(): 1

Python全栈学习:如何安装Python方法,详解!

因为Python是跨平台的,它可以运行在Windows.Mac和各种Linux/Unix系统上.在Windows上写Python程序,放到Linux上也是能够运行的. 要开始学习Python编程,首先就得把Python安装到你的电脑里.安装后,你会得到Python解释器(就是负责运行Python程序的),一个命令行交互环境,还有一个简单的集成开发环境. 安装Python 3.7 目前,Python有两个版本,一个是2.x版,一个是3.x版,这两个版本是不兼容的.由于3.x版越来越普及,我们的教程

Python全栈 正则表达式(re模块正则接口全方位详解)

re模块是Python的标准库模块 模块正则接口的整体模式 re.compile 返回regetx对象 finditer fullmatch match search 返回 match对象 match.属性|方法 re模块的使用: regex = re.compile(pattern,flags = 0) 功能 : 生成正则表达式对象 参数 : pattern     正则表达式 flags  功能标志位,丰富正则表达式的匹配 返回值: 返回一个正则表达式对象 re.findall(patter

全网首发mpvue课程 小程序全栈开发

第1章 课程简介本章节介绍了课程概述,教学方式 ,还有小程序项目的演示.1-1 课程简介1-2 github 获取源码1-3 github 桌面版简单管理代码1-4 git 命令行的使用1-5 mpvue 和 wepy 区别 第2章 原生小程序对原生小程序做一个入门的介绍,包括小程序帐号申请和开发工具安装和使用,小程序目录文件的讲解,再简单把小程序原生的组件和API过一下.2-1 原生小程序 - 小程序帐号和开发工具2-2 原生小程序 - 项目目录结构2-3 原生小程序 - 项目app.json

支付宝小程序开发之与微信小程序不同的地方

前言: 本文仅汇总微信小程序移植支付宝小程序过程中遇到的一些不同的地方,详细请参考官方开发文档. 网络请求: 对于网络请求,基本上改动不大,也就支付宝小程序没有responseType属性及响应码字段改成了status. 用户授权登录: 1. 登录: wx.login ====  my.getAuthCode wx.checkSession ==== 无(需后端接口验证) 缓存: 以常用的 wx.getStorageSync() 为例,先看微信的代码: wx.setStorageSync("id