1~3章复习

第一章微信小程序概述

微信小程序的特征

无需安装、触手可及、用完即走、无需卸载

小程序应用场景的特点

1.简单的业务逻辑     2.低频度的使用场景

开发工具界面功能介绍

工具栏：可以实现多种功能，小程序的编译、预览、切换后台、清理缓存等。

模拟区：在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。

目录文件区：目录文件区用来显示当前项目的目录结构。

编辑区：编辑区用来实现对代码的编辑操作。

调试区：调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor、Trace。

第二章微信小程序开发基础

小程序的基本目录结构

pages：放了所有页面文件，每个页面都有一个文件夹

utils：工具包，所有的页面都可以用到

app.js：主逻辑文件，主要用来注册小程序全局实例

app.json：主配置文件，配置小程序全局设置

app.wxss：主样式文件，在主样式表文件中设置的样式在其他页面文件中同样有效

小程序的开发框架

视图层：视图层就是所有.wxml文件与.wxss文件的集合，决定我们看到什么

逻辑层：逻辑层就是所有.js脚本文件的集合，进行交互处理或者网络处理

数据层：数据层在逻辑上包括页面临时数据或缓存、文件存储（本地存储）和网络存储与调用

第三章页面布局

盒子模型结构：

盒子模型就是我们在页面设计中经常用到的一种思维。在css中，一个独立的盒子模型由内容、内边距、边框和外边距4个部分组成的，如下图

盒子模型元素：

对padding、border和margin可以进一步细化为上下左右4个部分，如下图：

块级元素与行内元素

元素按显示方式分为块级元素、行内元素和行内块元素，它们的显示方式由display属性控制。

1.块级元素
块级元素默认占一行高度，一行内通常只有一个块级元素，添加新的块级元素时，会自动换行，块级元素一般作为盒子出现。块级元素的特点如下：

（1）一个块级元素占一行

（2）块级元素的默认高度由内容决定，除非自定义高度

（3）块级元素的默认宽度是父级元素的内容区宽度，除非自定义宽度

（4）块级元素的宽度、高度、外边距及内边距都可以自定义设置

（5）块级元素可以容纳块级元素和行内元素

2.行内元素

行内元素，不必从新一行开始，通常会与前后的其他行内元素显示在同一行中，它们不占有独立的区域，仅靠自身内容支撑结构，一般不可以设置大小，常用于控制页面中文本的样式。将一个元素的display属性设置为inline后，该元素即被设置为行内元素。行内元素的特点如下：

（1）行内元素不能被设置高度和宽度，其高度和宽度由内容决定

（2）行内元素内不能放置块级元素，只能容纳文本或其他行内元素

（3）同一块内，行内元素和其他行内元素显示在同一行

3.行内块元素

当元素的display属性被设置为inline-block时，元素被设置为行内块元素。行内块元素可以被设置高度、宽度、内外边距。

元素定位

浮动布局虽然灵活，但无法对元素的位置进行精确的控制。在css中，通过position属性可以实现对页面元素的精确定位。基本格式如下：

{position:static|relative|absolute|fixed}
static——默认值，该元素按照标准流进行布局；relative——相对定位，相对于它在原文档流的位置进行定位，它后面的盒子仍以标准流方式对待它；absolute——绝对定位，相对于其上一个已经定位的父元素进行定位，绝对定位的盒子从标准流中脱离，它对其后的兄弟盒子的定位没有影响；fixed——固定定位，相对于浏览器窗口进行定位

flex

flex时flexible box的缩写，意为弹性盒子，可以简便、完整、响应式的实现各种页面布局。

flex——块级flex布局，该元素变为弹性盒子；inline-flex——行内flex布局，行内容器符合行内元素的特征，同时在容器内又符合flex布局规范。设置了flex布局之后，子元素的float、clear和vertical-align属性将失效。

flex的布局模型如下：

flex容器支持的属性如下：