在视频中已经说过了，小程序的设计思想和原生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] 我在收到邮件后会回复。
一、微信小程序的wxml
具有基本的编程经验的工程师，只有与wxml接触后，您才会发现该语言的编程概念类似于html网页的编程技术。经过一番研究和开发，您会知道微信小程序的要求技术含量不高，只是更换了一些标签，例如
已替换为等待状态。即使您不太擅长前端，转用微信小程序的发展也将是一个很好的方向。
二、微信小程序的wxss
wxss是微信的CSS。微信用自己的开发语言wxss代替了Web编程中使用的css；实际上，主要的实现思想与Web开发技术基本相同，并且它只是对某些标签的简单替换，其中大部分是原始的CSS，基本上是正确的。它们都是通过调用同一页面来实现的，但是可以说，微信小程序比Web开发更简单，更方便。例如，只要写入index.wxml和index.wxss，它就位于两个文件中。这两个文件同时位于同一目录中，就像直接在网页上写CSS一样，这既简单又快速。
三、微信小程序的js
如果要开发微信小程序，您必须精通微信小程序的js。只要您具有html+css+js的良好基础，就可以全力学习微信小程序js，然后在前端进行开发。上面没有问题，但是微信js需要努力学习。您可以购买参考书或了解微信小程序的API，它们可以快速帮助您参与开发队列。
四、微信小程序的json
掌握了以上几点之后，您需要掌握json。简而言之，json是微信小程序的主要和次要接口。工程师可以通过json控制上下菜单栏，主要和辅助页面的显示顺序。但是，使用频率不高。它仅适用于基本小程序的框架，但这也需要学习，因为除显示类型外，每个前端操作都需要与后端匹配，因为如果要使其放大，则必须之所以简化，是因为修改代码后，在迷你程序中搜索到的版本就是启动后的版本，即我们提交微信评论后显示的版本。修改源代码后，需要将其提交给微信公众进行审核。平台小程序管理平台，用户只能在审核通过后才能看到您的修改，因此，为避免这种麻烦，您必须了解后端技术开发并与前端链接以与您进行交流。
实际上，小程序类似于H5表面，并提供了视图层描述语言。您需要掌握WXML和WXSS以及基于JavaScript的逻辑层框架。这里的wxml等同于html，而wxss等同于CSS。
简单总结一下微信动画的实现及执行步骤。
实现方式官方文档是这样说的：
①创建一个动画实例 animation。
②调用实例的方法来描述动画。
③最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性 ...
注意:
前两步是定义一个动画并设置都要干什么，然后把这个设置好的“规则”扔给界面上的某个元素，让它按照这个规则执行。
当然如果有多个元素的animation="{{ani}}"，也都会执行这个动画规则。
简单介绍一下例子中的几个参数和方法（其他的详见官方文档）：
首先需要定义一套关键帧，关键帧的定义方式比较特殊，它使用了关键字@keyframes来定义动画。这里可以用from{}to{}或者用百分比充当时间点。具体格式为：
然后，在需要设置动画的相应的标签里，调用动画就可以了
比如需要给div添加动画效果：
div{
animation：1s 2s 动画名称 运动方式 动画执行的次数
}
详细分析：
首先 wxml 中 pupContent 初始化信息为高度为0 display: 为 noneclick 为 false
， click 这个来判断 display: 为 block 还是为 none （即： block 为换行显示， none 为不显示，把视图隐藏了） option 用来判断是否调用打开的动画，或者关闭的动画
第一次点击 click 变为 true option 变为 true 这时候 pupContent 的 display: 为 block 高度由动画变为 800rpx
第二次点击阴影部分 首先设置了 option 为 false option 为 false 的话先走的动画是 pupContent 由 800 的高度变为 0 .然后在设置click为false就隐藏掉了
