二、支付宝小程序前端样式的设计.acss样式详解

html-css016

二、支付宝小程序前端样式的设计.acss样式详解,第1张

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

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

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

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

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

rpx(responsive pixel)可以根据屏幕宽度进行自适应。如何自适应呢?看下边的分析:

看下图:

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

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

选择器和css3的保持一致。一般有class=”test”类选择器和id=”test”的id选择器。当然在支付宝小程序的样式中特殊的地方就是:

※ .a- 或者 .am-为前缀的选择器已经被系统占用所以不要使用;

※ 不能使用属性选择器,例如,以下写法不被支持:

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

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

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

下节是视图层讲解,如果有任何问题可以再下方给我留言或者发邮件到 [email protected] 我在收到邮件后会回复。

css中直接使用给出的css变量赋值即可。自定义css添加在现有样式上添加组件直接使用给出的css变量赋值即可。自定义属性(有时也被称作CSS变量或者级联变量)是由CSS作者定义的,它包含的值可以在整个文档中重复使用。

akjs是一个基于jQuery的一套构建用户界面的前端框架,插件里包含着移动端常用的功能效果以及简单明了的CSS样式库,对IOS和安卓系统的兼容性很完美,并且支持前后端分离开发和路由模式跳页方式。

AKjs前端框架是Andrew.Kim和他的团队一起研发的基于jQuery的一个轻量级前端框架。它是只要懂jQuery的语法很容易上手的框架。该框架里面现在发布了很多移动端常用的功能效果;开发者们使用过程中功能插件也可以自己扩展增加。另一方面,它是相当于一个丰富的组件化UI框架,优点是开发要前后端分离,项目开发过程中后端通过ajax调用数据的机制。

AKjs是一个基于jQuery的一套构建用户界面的前端框架,插件里包含着移动端常用的功能效果以及简单明了的CSS样式库,对IOS和安卓系统的兼容性很完美。支持前后端分离开发和路由模式跳页方式。它与其他重量级框架不同的是AKjs采用了按需引入插件功能以及所有的UI布局中可以让用户自行发挥写页面,因为它提供的CSS库模块化的很细分,让开发者们可以轻松的解决前端的烦恼。

主要目录和主要文件说明:

index.html --- 走路由模式的DEMO页面 (可查看页面切换效果)

html/demo.html --- 未开启路由模式的DEMO页面

layout/main.html --- 路由模式中整个界面的布局;(该文件夹和文件名可以在路由管理器文件中配置)

router/ --- 通过路由访问的html界面,该文件夹也在路由管理器文件中配置(里面的所有html文件中最底部都调用功能插件的方法)

js/router.js --- 路由管理器(该功能切换页面时无刷新跳页的功能,不使用路由功能时可删除该文件。)

html/ --- 该目录是未开启路由模式的演示版文件;

html/js/common.js --- 未开启路由模式全局方法设置以及功能插件按需引入

js/plugin.js --- 走路由模式的全局方法设置以及功能插件按需引入

js/data.js --- Json数据文件

compress/ --- 功能插件目录,里面的css目录是相关功能插件的样式文件(该路径可在AKjs_Config方法中参数设置)

js/akjs.mobile.js --- AKjs手机端主插件(在项目中建议使用压缩版akjs.mobile.min.js)

css/iconfont --- 图标库 (AK图标库地址:http://www.iconfont.cn/collections/detail?cid=8740)

css/akjs.mobile.css --- AKjs全局公共样式库(初始使用本插件的开发者们尽量都看看里面的class命名)

css/akjs.animate.css --- AKjs动画库(在animated.css基础上增加了更多的动画效果)

css/theme.default.css --- 所有颜色相关的样式文件

css/style.css --- 自定义样式文件(引入第三方插件时通过该css文件进行覆盖样式)

注:开发正式项目的时候不要用demo.html里的内容,该文件只是静态演示版用的文件。为了更好的体验效果开发项目的时候请使用index.html。

AKjs仅支持http或https协议访问!不支持直接打开本地文件的方式访问!通过本地配置服务器访问或者使用WebStorm软件打开访问即可!