小程序启动加载实现原理

运行机制

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

更新机制

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

运行机制

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

四、View (页面视图)

视图层由 WXML 与 WXSS 编写，由组件来进行展示。

将逻辑层的数据反应成视图，同时将视图层的事件发送给逻辑层。

1、View - WXML

wxml编译器：wcc 把wxml文件 转为 js 执行方式：wcc index.wxml

2、View - WXSS

• WXSS(WeiXin Style Sheets)
• wxss编译器：wcsc 把wxss文件转化为 js 执行方式： wcsc index.wxss

3、View - Component

• 小程序的组件基于Web Component标准

• 使用Polymer框架实现Web Component

4、View - Native Component

• 目前Native实现的组件有 <canvas/> <video/> <map/> <textarea/>
• Native组件层在WebView层之上

五、WebView预加载

每次小程序进入除了当前页面,Native预先额外加载一个WebView

当打开指定页面时，用默认数据直接渲染，请求数据回来时局部更新

返回显示历史View

退出小程序，View状态不销毁

六、App Service(逻辑层)

逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈

1、App( ) 小程序的入口；Page( ) 页面的入口

3、提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。

4、每个页面有独立的作用域，并提供模块化能力。

5、数据绑定、事件分发、生命周期管理、路由管理

运行环境

IOS - JSCore

Android - X5 JS解析器

DevTool - nwjs Chrome 内核

1、App Service - Binding

• 数据绑定使用 Mustache 语法（双大括号）将变量包起来，动态数据均来自对应 Page 的 data，可以通过setData方法修改数据。
• 事件绑定的写法同组件的属性，以 key、value 的形式，key 以bind或catch开头，然后跟上事件的类型，如bindtap, catchtouchstart，value 是一个字符串，需要在对应的 Page 中定义同名的函数。

2、App Service - Life Cylce

3、App Service - API

API通过WeixinJSBridge和Native 进行通信

4、App Service - Router

• navigateTo(OBJECT)

保留当前页面，跳转到应用内的某个页面，使用navigateBack可以返回到原页面。页面路径只能是五层

• redirectTo(OBJECT)

关闭当前页面，跳转到应用内的某个页面。

• navigateBack(OBJECT)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages()) 获取当前的页面栈，决定需要返回几层。