微信小程序的架构

1、什么是小程序

小程序是介于web网页应用和原生应用的一种产物；小程序类web，但不是HTML5；即用即走，随手可得；拥有离线能力；基于微信跨平台。

2、小程序架构

（1）小程序主要模块构成
小程序自身分为两个主要部分独立运行：view 模块和 service 模块。在开发者工具中，它们独立运行于不同的 webivew tag 中。

view 模块负责前端界面显示，它由 wxml 和 wxss 转换后代码以及微信提供相关辅助模块组成。 一个 view 模块对应一个 页面, 小程序支持同时多个 view 存在。
service 模块负责后台逻辑，它由 js 代码以及微信提供的相关辅助模块组成。 一个应用只有一个 service 进程，它同样也是一个页面。它在程序生命周期内后台运行，service 模块通过与 view 模块实现不同但接口格式一样的微信JSBridge 对象跟后台通信。

上图是微信小程序视图层和逻辑层的结构示意图。可以看到：

• 视图层和逻辑层分离，通过数据驱动，事件交互，不直接操作DOM；视图层负责渲染页面结构，逻辑层负责逻辑处理、数据请求、接口调用等。

• 视图层与逻辑层通过数据data和事件event进行通信，逻辑层提供数据给视图层，视图层通过绑定/捕获事件发起交互让逻辑层处理视图使用WebView渲染，JS由JSCore(IOS)/ X5(Android) /nmjs(DevTool)渲染解析

（2）小程序模块间通信

上图是小程序模块通信情况图，可以清楚地看到视图层及逻辑层之间的通信结构。

3、小程序的生命周期

用一下实例来观察页面的生命周期：

由上图可知，小程序由两大线程组成：负责界面的视图线程和负责数据、服务处理的服务线程，两者协同工作，完成小程序页面生命周期的调用。
（1）视图线程有四个状态：

• 初始化状态：初始化视图线程所需要的工作，初始化完成后向 “服务线程”发送初始化完成信号，然后进入等待状态，等待服务线程提供初始化数据。
• 首次渲染状态：当收到服务线程提供的初始化数据后，渲染小程序界面，渲染完毕后，发送“首次渲染完成信号”给服务线程，并将页面展示给用户。
• 持续渲染状态：此时界面线程继续一直等待“服务线程”通过界面数据，只要收到就重新局部渲染，因此只要更新数据并发送信号，界面就自动更新。
• 结束状态：页面被回收或者销毁、应用被系统回收、销毁时触发。

（2）服务线程五个状态：

• 初始化状态：此阶段仅启动服务线程所需的基本功能，比如信号发送模块。系统的初始化工作完毕，就调用自定义的onload和onshow，然后等待视图线程的“视图线程初始化完成”。
• 等待激活状态：接收到“视图线程初始化完成”信号后，将初始化数据发送给“视图线程”，等待视图线程完成初次渲染。
• 激活状态：收到视图线程发送来的“首次渲染完成”信号后，就进入激活状态既程序的正常运行状态，并调用自定义的onReady()函数。此状态下就可以发送界面数据给界面线程进行局部渲染，更新页面。
• 后台运行状态：如果界面进入后台，服务线程就进入后台运行状态，
• 结束状态：页面被回收或者销毁、应用被系统回收、销毁时触发。