1. 逻辑层

1.1 注册小程序

• 注册小程序示例
  每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
• 获取全局唯一的 App 示例
  整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

1.2 注册页面

• 注册页面示例
  对于小程序中的每个页面，都需要在页面对应的 js 文件中调用 Page 方法注册页面示例，指定页面的初始数据、生命周期回调、事件处理函数等。
• 拓展
  除了 Page ，作为高级用法，页面可以像自定义组件一样使用 Component 来创建，这样就可以使用自定义组件的特性，如 behaviors 等。

1.3 页面生命周期

Page实例的生命周期.png

1.4 页面路由

说明：在小程序中所有页面的路由全部由框架进行管理，框架以栈的形式维护了当前的所有页面。
(1) 路由方式

路由的触发方式以及页面生命周期函数.png

说明：

• navigateTo, redirectTo 只能打开非 tabBar 页面。
• switchTab 只能打开 tabBar 页面。
• reLaunch 可以打开任意页面。
• 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
• 调用页面路由带的参数可以在目标页面的onLoad中获取。

(2) 发生路由切换时对应的页面栈的表现

路由方式和对应页面栈的表现.png

1.5 模块化

• 公共代码模块化
  可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。在需要使用这些模块的文件中，使用 require 将公共代码引入。
• 文件作用域
  在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。通过全局函数 getApp 可以获取全局的应用实例，如果需要全局的数据可以在 App 中设置。

1.6 API

说明：小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。通常，在小程序 API 有以下几种类型：

• 事件监听 API：以 on 开头的 API 用来监听某个事件是否触发
• 同步 API：以 Sync 结尾的 API 都是同步 API
• 异步 API：大多数 API 都是异步 API，如 wx.request，wx.login 等
  备注1：异步 API 接口通常都接受一个 Object 类型的参数
  
  Object参数说明.png
  
  备注2：success，fail，complete 函数调用时会传入一个 Object 类型参数
  
  回调函数的参数.png

2. 视图层

2.1 WXML

说明：WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。WXML 具有什么能力如下：

• 数据绑定
• 列表渲染
• 条件渲染
• 模板
• 引用

2.2 WXSS

说明：WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。WXSS 具有 CSS 大部分特性，同时为了更适合开发微信小程序，WXSS 对 CSS 进行了扩充以及修改，WXSS 扩展的特性有：
(1)新增了尺寸单位 rpx：rpx可以根据屏幕宽度进行自适应
(2)提供了全局的样式和局部样式
(3)仅支持部分 CSS 选择器
(4)样式导入
使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。
(5)内联样式：框架组件上支持使用 style、class 属性来控制组件的样式

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。
• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

WXSS补充说明参考：微信小程序开发(微信小程序与普通网页开发的区别和联系)中的第2.3节WXSS 样式。

2.3 WXS

说明：WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

2.4 基础组件

说明：框架为开发者提供了一系列基础组件，开发者可以通过组合这些基础组件进行快速开发。
(1) 组件介绍

• 组件是视图层的基本组成单元。
• 组件自带一些功能与微信风格一致的样式。
• 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。

注意：所有组件与属性都是小写，以连字符-连接
(2) 属性类型

属性类型.png

所有组件都有的公共属性.png

2.5 事件系统

2.5.1 事件介绍

• 事件是视图层到逻辑层的通讯方式。
• 事件可以将用户的行为反馈到逻辑层进行处理。
• 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象可以携带额外信息，如 id, dataset, touches。

2.5.2 事件的使用方式

• 在组件中绑定一个事件处理函数
• 在相应的Page定义中写上相应的事件处理函数，参数是event

2.5.3 使用WXS函数响应事件

WXS响应事件

2.5.4 事件详解

(1) 事件分类

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递

(2) 事件绑定和冒泡：事件绑定的写法同组件的属性，以 key、value 的形式

• key 以bind或catch开头，然后跟上事件的类型，如bindtap、catchtouchstart
• value 是一个字符串，需要在对应的 Page 中定义同名的函数(不然当触发事件的时候会报错)

备注：bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。如下例：点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

(3) 事件的捕获阶段
(4) 事件对象
说明：如无特殊说明，当组件触发事件时，逻辑层绑定该事件的处理函数会收到一个事件对象。

事件对象的属性.png

• 区别target和currentTarget

  
  
  区别target和currentTarget.png
• dataset
  在组件中可以定义数据，这些数据将会通过事件传递给 SERVICE。 书写方式： 以data-开头，多个单词由连字符-链接，不能有大写(大写会自动转成小写)如data-element-type，最终在 event.currentTarget.dataset 中会将连字符转成驼峰elementType。

3. 场景值

说明：场景值用来描述用户进入小程序的路径。完整场景值的含义请查看场景值列表。