一、概述

微信小程序组成结构包含两层，逻辑层和视图层。逻辑层是由javascript编写而成，视图层是由WXML和WXSS组合构成。还有flex模型，flex布局可以确保页面需要适应不同屏幕尺寸及设备类型时元素在恰当的位置。本文主要内容是以上几点。

二、逻辑层

小程序开发框架逻辑层又称App Service，所有的逻辑交互都是由JavaScript编程语言实现。逻辑层的作用是处理业务数据之后，发送给视图层进行渲染和接收视图层所产生事件的反馈。

1. 注册程序

小程序通过使用App(OBJECT)方法进行注册，用于指定小程序的生命周期函数。 需要注意的是，App()只能写在小程序根目录的app.js文件中，有且只能注册一个。

App()中的函数均可为可选函数，比如，onLaunch()、onShow（）、onError等函数。在实际开发过程中根据需要可以自行删除部分函数，或者保留函数不具体编写内容。

小程序后台是指小程序没有在手机当前画面显示，但是并没有被消毁。比如，当用户点击左上角的按钮关闭小程序时，会进入后台运行状态。
小程序前台是指小程序在手机当前画面正在被使用。比如，进入小程序所前呈现给用户的状态，或打开处于后台运行状态时重新进入前的台运行状态。

2. 注册页面

小程序每个页面JS文件中通过使用Page(OBJECT)方法进行页面注册，该方法可以用于指定小程序页面的生命周期函数。Page()只能写在小程序根每个页面对应的JS文件中，每个页面有且只能注册一个。
Page()和App()的函数类似，可以根据实际情况删除或保留该函数不具体编写内容。Page()支持自定义页面变量，包括变量名称、取值和数量。

2.1. 初始数据

Page()默认生成的第一项就是data属性，该属性是页面第一次渲染使用的初始数据。data会以JSON字符串的形式由逻辑层传至渲染层，所以data中的数据必须是可以转成JSON的类型。

2.2. 生命周期回调函数

Page()中默认生成的onLoad()、onShow()、onReady()、onHide()、onUnload()均属于页面生命周期回调函数。

onUnload() 当页面卸载时触发，比如，redirectTo或navigateBack到其他页面时。

2.3. 页面事件处理函数

Page()中默认生成onPullDownRefresh()、onReachBottom()、onShareAppMessage()、以及未自动生成的onPageScroll()、onTabItemTap()均属于页面事件处理函数。
onPullDownRefresh() 监听用户下拉刷新事件。需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
onReachBottom() 监听用户上拉触底事件。在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。触发距离内滑动间，事件只会被触发一次。
onPageScroll(OBJECT) 监听用户滑动页面事件。参数OBJECT具有唯一属性scrollTop，该属性为number类型表示页面在锤直方向已滚动的距离(单位为px)。
onShareAppMessage(OBJECT)监听用户单击页面内「转发」按钮（其属性值open-type="share"）或者右上角菜单「转发」按钮行为。
onTabItemTap(OBJECT) 单击tab时触发。

2.4. 组件事件处理函数

Page()中可以定义组件事件处理函数，在WXML页面的组件上添加事件绑定，当事件被触发时就会主动执行Page()中对应的事件处理函数。

三、视图层

视图层主要负责页面结构的呈现，WXML页面、WXSS样式和组件都是视图层的内容。

3. WXML

WXML(WeiXin Markup Language)微信标记语言，类似于HTML，使用<标签>构建页面的语言。WXML具有数据绑定、列表渲染、条件渲染、模板、事件和引用功能。

3.1.  数据绑定

数据绑定分为简单绑定（可以使用{{变量名}}形式表示动态数据，比如，{{msg}}）;

组件属性绑定(可以使用动态数据，比如，);

控制属性绑定（使用动态数据,比如，）;

关键字绑定（比如，);

运算绑定（在花括号内部还可以进行简单的运算，支持三元运算、算术运算、逻辑判断、字符串运算和数据路径运算）;

组合绑定(可以在花括号内直接进行变量和值的组合，构成新的对像或者数组)。

3.2. 列表渲染

 (1)简单列表

小程序在组件上使用wx:for属性实现列表渲染，即同一个组件批量出现多次，内容可以不同。
嵌套列表：wx:for可以多层次嵌套，比如，二维数组数据渲染。
多节点列表：用户可以将wx:for用在标签上，以渲染一个包含多节点的结构块。
条件渲染
简单条件：使用wx:if="{{condition}}" 判断是否需要渲染该代码块。

（2）多节点条件

如果一次性判断多个组件标签，可以使用标签将多个组件包装起来，并在上使用wx:if控制属性。

3.3. 模板

小程序框架允许在WXML文件中提供模板(template)，模板可以用于定义代码片段，然后在不同页面被重复调用。

3.4. 事件

事件是视图层到逻辑层的通信方式，有以下特点：
可以将用户的行为反溃到逻辑层进行处理；可以绑定在组件上，当触发事件时就会执行逻辑层中对应的事件处理函数；对像可以携带额外信息。

(1) 事件的分类

事件分为 冒泡事件和非冒泡事件，说明如下。
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

3.5.  引用

WXML提供了import和include两种文件引用方式。
import 在小程序可以使用

四、WXSS

WXSS （WeiXin Style Sheets）微信样式表，这是一种样式语言，用于描述WXML的组件样式。样式分为全局样式与局部样式，根据在app.wxss中样式为全局样式；在页面WXSS文件中定义的样式为局部样式。

4.1.  尺寸单位

小程序规定了全新的尺寸单位rpx(responsove pixel)，可以根据屏幕宽度进行自适应。其原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。

4.2. 样式倒入

小程序在WXSS样式表中使用@import语句导入外联样式表，@import后跟需要导入的外联样式的相对路径。

五、fiex布局

小程序使用fiex模型提高页面布局的效率。这是一种灵活的布局模型，当页面需要适应不同屏幕尺寸及设备类型时该模型可以确保元素在恰当的位置。