微信小程序原理与架构设计

0.目前移动端主流开发模式：1.0 小程序页面与H5页面的区别

小程序开发在这个过程中，我们面临着iOS和Android微信客户端和小程序开发开发者工具。因此，微信小程序介于网页端和原生应用之间，可以同时丰富调用功能接口和跨平台。

2.0 小程序架构设计2.1 双线程模型

小程序的渲染层和逻辑层由两个线程管理：

（页面渲染的具体过程是：在渲染层，宿主环境会将WXML转换成对应的JS对象。当逻辑层数据发生变化时，我们需要将逻辑层的数据通过宿主环境提供的setData方法.layer，然后对比前后差异，将差异应用到原始Dom树，渲染正确的UI界面）

双线程模型是使小程序框架与业界大多数前端 Web 框架不同的地方。基于此模型 外包小程序开发 ，可以提供更好的治理和更安全的环境。缺点是带来无处不在的异步问题（任何数据传输都是线程间的通信小程序开发设计，也就是会有一定的延迟），但是小程序在框架层面封装了异步带来的时序问题。

2.2 组件系统

我们知道小程序有自己的组件，而这些基础组件都是基于 Exparser 框架的。Exparser 基于 WebComponents 的 ShadowDOM 模型，但不依赖浏览器原生支持，可以在纯 JS 环境中运行。

在applet中，所有与节点树相关的操作都依赖于Exparser，包括WXML到页面最终节点树的构建，对CreateSelectorQuery的调用，以及自定义组件的属性。

现在微信小程序也支持自定义组件，用法和组件间的通信和Vue类似。

3. 小程序生命周期

小程序的生命周期借鉴了安卓的生命周期。如果你学过Android上的APP开发，对小程序的理解就很容易了。

接口线程有四种状态：

1、初始化状态：初始化接口线程所需的工作，包括工作机制，基本上与我们开发者无关。初始化完成后，向“服务线程”发送初始化完成信号，然后进入等待初始化数据返回的状态。

2、第一次渲染状态：收到“服务线程”发送的初始化数据（即json和js中的数据数据）后，开始渲染小程序界面。渲染完成后小程序开发设计，向服务线程发送“第一次渲染完成信号”。，并向用户显示页面。

,3、持续渲染状态：此时界面线程继续等待“服务线程”通过this.setdata()函数发送的界面数据，只要接收到就在本地重新渲染。因此，只要更新数据并发送信号，接口就会自动更新。

4.结束状态：结束渲染。

服务线程的五种状态：

1、初始化状态：不需要和其他模块通信，和小程序开发关系不大。这个阶段是启动服务线程所需的基本功能，例如信号发送模块。系统初始化完成后 小程序外包开发 ，调用自定义的onload和onshow。

然后等待接口线程的“接口线程初始化完成”信号。

onload 只在第一次渲染时执行一次，onshow 是在每次界面切换时执行。简单的理解，这是唯一的区别。

2、等待激活状态：收到“接口线程初始化完成”信号后，将初始化数据发送给“接口线程”，等待接口线程完成初始渲染。

3、激活状态：接收到接口线程发送的“首次渲染完成”信号后，进入激活状态，即程序正常运行状态，调用自定义的onReady()函数。

4、在这种状态下，可以通过this.setData函数将界面数据发送到界面线程进行本地渲染小程序开发设计，从而更新页面。

5、后台运行状态：如果接口进入后台，则服务线程进入后台运行状态。从目前官方的解释来看，这种状态是相当奇怪的。和激活状态一样，也可以通过setdata函数更新界面。毕竟小程序的框架才刚刚上线，所以以后应该会有很大的不同。

【昱远信息系统开发定制】