小程序的技术框架

1、小程序运行机制

1）小程序启动会有两种情况，一种是「冷启动」，一种是「热启动」。

假如用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时无需重新启动，只需将后台态的小程序切换到前台，这个过程就是热启动；冷启动指的是用户首次打开或小程序被微信主动销毁后再次打开的情况，此时小程序需要重新加载启动。

冷启动 与 热启动

冷启动：首次打开和销毁后再次打开

热启动（没有重新启动）：已经打开过，5分钟内再次打开，直接切换到前台

更新机制

小程序冷启动时如果发现有新版本，将会异步下载新版本的代码包，并同时用客户端本地的包进行启动，即新版本的小程序需要等下一次冷启动才会应用上。

2）运行机制

• 小程序没有重启的概念
• 当小程序进入后台，客户端会维持一段时间的运行状态，超过一定时间后（目前是5分钟）会被微信主动销毁
• 置顶的小程序不会被微信主动销毁
• 当收到系统内存告警也会进行小程序的销毁

前台 与 后台

前台：小程序运行的时候

后台：（点击离开，或home键离开微信）离开但没有销毁

小程序的销毁

小程序进入后台后，(5分钟内)没有立即销毁，5分钟后可能会被销毁，

如果小程序 占用系统资源过高，持续占用资源，会被系统销毁或被微信的客户端主动的回收

再次打开逻辑

基础库 1.4.0 开始支持，低版本需做兼容处理

用户打开小程序的预期有以下两类场景：

A. 打开首页： 场景值有 1001, 1019, 1022, 1023, 1038, 1056

B. 打开小程序指定的某个页面： 场景值为除 A 以外的其他

当再次打开一个小程序逻辑如下：

上一次的场景	当前打开的场景	效果
A	A	保留原来的状态
B	A	清空原来的页面栈，打开首页（相当于执行 wx.reLaunch 到首页）
A 或 B	B	清空原来的页面栈，打开指定页面（相当于执行 wx.reLaunch 到指定页）

运行机制参考链接：

https://www.cnblogs.com/baixinL/p/12002257.html

https://www.cnblogs.com/storebook/p/8111652.html#ylbtech

小程序架构

微信小程序的框架包含两部分View视图层、App Service逻辑层，View层用来渲染页面结构，AppService层用来逻辑处理、数据请求、接口调用，它们在两个进程（两个Webview）里运行。 

小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。只需要在逻辑层更改数据，视图层内容就会相应更新。

视图层和逻辑层通过系统层的JSBridage进行通信，逻辑层把数据变化通知到视图层，触发视图层页面更新，视图层把触发的事件通知到逻辑层进行业务处理。

小程序架构图： 

小程序启动时会从CDN下载小程序的完整包，一般是数字命名的,如：_-2082693788_4.wxapkg

框架程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个框架程序主体部分由三个文件组成，必须放在项目的根目录。

一个完整的小程序主要由以下几部分组成： 
一个入口文件：app.js 
一个全局样式：app.wxss 
一个全局配置：app.json 
页面：pages下，每个页面再按文件夹划分，每个页面4个文件 
视图：wxml，wxss 
逻辑：js，json（页面配置，不是必须）

注：pages里面还可以再根据模块划分子目录，孙子目录，只需要在app.json里注册时填写路径就行。

文件	作用
app.js	小程序(全局)逻辑
app.json	小程序(全局)公共设置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
app.wxss	小程序公共(全局)样式表

一个框架页面由四个文件组成：

文件类型	作用
js	页面逻辑
wxml	页面结构，框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
wxss	是一套样式语言，用于描述 WXML 的组件样式。用来决定 WXML 的组件应该怎么显示。
json	页面配置

按照『约定优于配置』的原则，一个框架页面至少包含js、wxml、wxss三个文件类型，文件名要一样，例如首页index.js、index.wxml、index.wxss,并且要放在同一文件夹下。页面注册时，文件名不需要写文件后缀，因为框架会自动去寻找路径.json,.js,.wxml,.wxss的四个文件进行整合。

小程序技术实现

小程序的UI视图和逻辑处理是用多个webview实现的，逻辑处理的JS代码全部加载到一个Webview里面，称之为AppService，整个小程序只有一个，并且整个生命周期常驻内存，而所有的视图（wxml和wxss）都是单独的Webview来承载，称之为AppView。所以一个小程序打开至少就会有2个webview进程，正式因为每个视图都是一个独立的webview进程，考虑到性能消耗，小程序不允许打开超过5个层级的页面，当然同是也是为了体验更好。
 

小程序生命周期：

分为两个部分来理解：应用生命周期（左侧蓝色部分）和页面生命周期（右侧绿色部分）。

其中应用的生命周期是这样一个流程：1、用户首次打开小程序，触发 onLaunch（全局只触发一次）。2、小程序初始化完成后，触发onShow方法，监听小程序显示。3、小程序从前台进入后台，触发 onHide方法。4、小程序从后台进入前台显示，触发 onShow方法。5、小程序后台运行一定时间，或系统资源占用过高，会被销毁。

页面生命周期是这样的一个流程：1、小程序注册完成后，加载页面，触发onLoad方法。2、页面载入后触发onShow方法，显示页面。3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。4、当小程序后台运行或跳转到其他页面时，触发onHide方法。5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。同时，应用生命周期会影响到页面生命周期。

综上来看，小程序的技术架构上的清晰明了，相比沉重的原生APP开发而已要好理解的多。而近期小程序官方逐步的释放小程序的一些入口，由此可见小程序也将慢慢的得到微信官方更大的流量支持。万里虎个人还是非常看好小程序的未来，简单、高效、方便、快捷的用户体验，这些都符合一个好程序的特质。小程序也许会在不久的将来成为下一个金矿，吸引更多开发者涌入。

参考：

https://www.jianshu.com/p/1c860834799c
https://blog.csdn.net/xiangzhihong8/article/details/66521459

https://www.cnblogs.com/kenshinobiy/p/6724867.html