复习篇（1~3章）

一、第一章（微信小程序的概述）

1.1、认识微信小程序

1.1.1、小程序简介

        微信（WeChat）是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信（Instant Messaging，IM）服务的应用程序。

        微信小程序是一种由腾讯开发的应用程序软件，可在微信内直接使用，无需下载和安装。小程序的设计理念是"用完即走，无需安装"，旨在为用户提供轻量级的移动应用体验。通过微信平台提供的接口和工具，开发者可以创建不同类型的小程序，覆盖多个领域，如购物、社交、娱乐等。  

1.1.2、小程序的特征

（1）无需安装

（2）触手可及

（3）用完即走

（4）无需加载

1.1.3、小程序应用场景的特点

（1）简单的业务逻辑

简单是指应用本身的业务逻辑。

（2）低频度的使用场景

低频度是小程序使用场景的另一个特点。

1.2、微信小程序开发流程

1.3、微信小程序开发者工具界面功能介绍

          微信小程序界面划分于5大区域：工具栏、模拟区、目录文件区、编辑区和调试区。

1、工具栏：工具栏中有项目、文件、编辑、工具等等工具。

2、模拟区：模拟器（存放模拟器）

3、文件区：存放代码文件区域

4、代码区：写代码的区域

5、调试区：

       调试区的功能是帮助开发者进行代码调试及排查有问题的区域，小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Nekwork、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项：是控制开发工具按钮。

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

2.1、小程序的基本目录结构

1、pages：存放全部的页面文件，有两子目录index与logs
2、utils：存放一些公共的.js文件（例如：格式化时间的自定义模块）
3、app.json：小程序公共设置文件，配置小程序全局设置
4、app.js：小程序逻辑文件，用来小程序全局实例
5、app.wxss：小程序主样式表文件
6、project.config.json：项目配置文件

       通常，每一个页面包含4个不同扩展名（.wxml、.wxss、.js、.json） 的文件，分别用于表示页面的结构、样式、逻辑、配置文件。 

2.2、小程序的开发框架

       1.视图层：MINA框架的视图层由WXML与WXSS 编写，由组件来进行展示.wxml文件用于描述页面的结构； .wxss文件用于描述页面的样式。
       2. 逻辑层：逻辑层用于处理事务逻辑。
       3.数据层：数据层在逻辑上包括页面临时数据或缓存文件存储（本地存储）和网络存储与调用。
     （1）页面临时数据或缓存
     （2）文件存储（本地存储）
       wx.getStorage:获取本地数据缓存
       wx.setStorage:设置本地数据缓存
       wx.clearStorage:清理本地数据缓存
     （3）网络存储与调用
       wx.request: 发起网络请求
       wx.uploadFile: 上传文件
       wx.downloadFile: 下载文件
      调用URL的API接口，如下：
      wx.navigateTo ：新窗口打开页面
      wx.redirectTo: 原窗口打开页面

2.3、小程序的配置文件

1、小程序的全局配置保存在全局配置文件（app.json）中

用来配置页面的文件的路径（pages）、设置窗口（window）、设定网络请求API的超时时间值（networkTimeout）与配置切换页（tabBar）等。

 2、pages配置项：

设置pages的注意项：

（1）：数组的第一项用于设定小程序的初始页面。

（2）：在小程序中新增或减少页面时，都需要都数组进行修改。

（3）：文件名不需要写文件扩展名。

3、window配置项：

          window配置项负责设置小程序状态栏，导航栏，标题，窗口背景颜色的系统样式。

4、tabBar配置项 

           tabBar配置项 当需要在程序顶部与底部设置菜单栏时，可以通过配置tabBar配置项实现。

5、 networkTimeout配置项

        小程序中各种网络请求API的超时时间值只能通过networkTimeout配置项进行统一设置，不能在API中单独设置。

6、debug配置项

         debug配置项用于开启开发者工具的调试模式，默认为false。

2.4、逻辑层文件

         小程序中逻辑层文件分为项目逻辑文件与页面逻辑文件。

1、项目逻辑文件

       项目逻辑文件app.js中可以通过App（）函数注册小程序周期函数、全局属性和全局方法、已注册的小程序实例可以在其他逻辑文件中通过getApp（）获取。

 2、页面逻辑文件

       页面逻辑文件的主要功能有：设置初始数据；定义当前页面的生命周期函数；定义事件处理函数等。

 1、设置初始数据：设置初始数据是对页面的第一次数据绑定

2、定义当前页面的生命周期函数：在Page（）函数的参数中，可以定义当前页面的生命周期函数，函数如下：

      （1）：onLoad   页面加载函数

      （2）：onShow  页面显示函数

      （3）：onReady  页面数据绑定函数

      （4）：onHide    页面隐藏函数

      （5）：onUnload   页面卸载函数

2.5、 页面结构文件

        页面结构文件（wxml）是框架设计的一套类似HTML的标签语言，结合基础组件、事件系统，可以构建页面的结构，即.wxml文件。

      WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

1、数据绑定

（1）：简单绑定：是指用大括号（{{}}）将变量包起来，作为字符串输出使用

（2）：运算：做一些简单的运算（算术、逻辑、三元、字符串等运算）

2、条件数据绑定

（1）：wx:if              是指使用wx:if这个属性来判断是否数据绑定当前组件

（2）：block  wx:if   是需要一个组件去控制多个组件，可以通过block包起来

3、列表数据绑定

（1）：wx：for            用来绑定一个数组

（2）：block   wx:for    是需要一个组件去控制多个数组，可以通过block包起来

 4、模板

（1）：定义模板

（2）：调用模板

5、引用页面文件

（1）：import方式

（2）：include方式

6、页面事件 ：简单来说，小程序中的事件是用户的一种行为或通信方式。在页面文件中，通过定义事件来完成页面与用户之间的交互，同时通过事件来实现视图层与逻辑层的通信。我们可以将事件绑定到组件上，当达到触发条件时，事件就会执行逻辑层中对应的事件处理函数。
        要实现这种机制，需要定义事件函数和调用事件。
（1）定义事件函数：    在.js文件中定义事件函数来实现相关功能，当事件响应后就会执行事件处理代码。
（1）调用事件：     调用事件也称为注册事件。

        在小程序中，事件分为冒泡事件和非冒泡事件两大类型。
（1）冒泡事件：     冒泡事件是指某个组件上的事件被触发后，事件会向父级元素传递，父级元素再向其父级元素传递，一直到页面的顶级元素。
（2）非冒泡事件：   非冒泡事件是指某个组件上的事件被触发后，该事件不会向父节点传递。

2.6、页面样式文件

        页面样式文件(WXSS)是基于CSS拓展的样式语言，用于描述WXML的组成样式，决定WXML的组件如何显示。WXSS具有CSS 的大部分特性，小程序对WxSs做了一些扩充和修改。    

1、尺寸单位：由于CSS原有的尺寸单位在不同尺寸的屏幕中得不到很好的呈现，WxsS在此基础上增back 加了尺寸单位rpx(respnesive pixel)。

2、样式导入：为了便于管理Wxss文件，我们可以将样式存放于不同的文件中。

3、选择器：目前，WXSS仅支持CSS中常用的选择器，如，class、#id、element、:: before、∷: aftert等。

4、WXSS常用属性：WXSS文件与CSS 文件有大部分属性名及属性值相同

三、第三章（页面布局）

3.1、盒子模型

        微信小程序的视图层由WXML和WXSS组成。其中，WXSS (WeiXin Style Sheets)是基于CSS拓展的样式语言，用于描述 WXMI的组成样式，决定 WXMI的组件如何显示。WXSS 具有CSS 的大部分特性。

       在页面设计中，只有掌握了盒子模型以及盒子模型的各个属性和应用方法，才能轻松控制页面中的各个元素。

      盒子模型就是我们在页面设计中经常用到的一种思维模型。在CSS中，一个独立的盒子模型由内容(content)、内边距(padding)、边框(border)和外边距(margin) 4个部分组成。

3.2、块元素和行元素

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

3.2.1、块级元素

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

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

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

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

       (5)块级元素可以容纳块级元素和行内元素。

3.2.2、行内元素

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

行内元素的特点如下:
       (1)行内元素不能被设置高度和宽度，其高度和宽度由内容决定。

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

       (3)同一块内,行内元素和其他行内元素显示在同一行。

3.2.3、行内块元素

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

3.3、浮动与定位

3.3.1、元素浮动

       元素浮动就是指设置了浮动属性的元素会脱离标准文档流的控制，移到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动。

 3.3.2、元素清除

        由于浮动元素不在占用原文档流的位置，因此它会对页面中其他元素的排列产生影响。在CSS中，clear属性用于清除浮动元素对其他元素的影响。

3.4、flex布局

        flex 布局是万维网联盟(World WideWebConsortium,W3C)在2009年提出的一种新布局方案，该布局可以简单快速地完成各种可以伸缩的设计，以便很好地支持响应式布局。 flex 是 flexible box 的缩写，意为弹性盒子模型，可以简便、完整、响应式地实现各种页面布局。
        flex 布局主要由容器和项目组成，采用fex布局的元素称为flex容器(flex container), flex布局的所有直接子元素自动成为容器的成员，称为flex 项目(flexitem)。
        容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start，结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end.
        项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做 cross size,flex布局模型，如图所示：
        设置 display属性可以将一个元素指定为flex 布局，设置flex- direction属性可以指定主轴方向。主轴既可以是水平方向，也可以是垂直方向。