因为一些小伙伴的私信和交流,感觉写的这些内容对别人还是有一些帮忙,所以打算剩下的几篇更新频率会快一些争取一星期一篇,应该还可以在写 4 篇的内容(包含小游戏和云开发服务),可以带你初步了解搭建微信小程序引擎运行环境从头开始的一些过程
核心篇分了几篇来描述,本文先从整体系统层面来概括小程序运行环境时的架构,明白它的整体大致流程,后面会接着更新细节内容
总体架构图解
架构分步详解
启动流程过程
消息通信流程
消息处理机制
正文
总体架构
先给大家展示一张架构大致图
可以看出大致的一个层次结构
展现层 UI Simulator Layer
控制层 Control Layer
消息处理层 Message Handler Layer
服务层 Service Layer
基础设施层 Infrastructure Layer
本地层 Native Layer
操作系统层 OS Layer
展现层 UI Simulator Layer
小程序的页面显示,菜单标题等展示内容
响应用户的事件操作
控制层 Control Layer
UI 控制
lanuchHome
navigateTo
redirectTo
navigateBack
switchTab
showShareMenu
其他
消息相互传输分发
service 层 和 service 层 间消息转发
service 层 和 webview 层 间消息分发
webview 层 和 webview 层 间消息分发
消息处理
处理器选择
处理结果收集
消息缓存
服务层 Service Layer
先处理 Message 消息,在各层之间相互转发在返回结果
网络服务 API
存储服务 API
微信数据服务 API
事件跟踪服务 API
小程序配置信息服务 API
渲染状态服务 API
分享服务 API
文件操作服务 API
其他
基础设施层 Infrastructure Layer
Log 文件系统
日志文件存储
Level DB
数据存储
基本地层 Native Layer
本地层主要负责设备的具体操作
访问相机
访问 GPS
访问通讯录
访问相册
访问文件系统
拨号
其他
操作系统层 OS Layer
主要是运行载体平台
Android
IOS
以上就是一个大致的架构层级。
下面我们在通过一个小程序启动运行流程来看下,各层架构设计在运行时的细节
还是先给大家看一个图
从图中我们看到核心的控制层和 socket server 服务的交互 ,他就相当于人的中枢运载这各部件相互和谐的工作,下面还是用文字来简述下整个启动流程。
启动流程说明
加载小程序系统配置文件
创建 APPSERVICE webview
根据配置创建 HOME PAGEFRAME WEBVIEW
通知 Socket Server 路由信息
Socket Server 转发路由信息到 APPSERVICE
APPSERVICE 通知 HOME PAGEFRAME 渲染
HOME PAGEFRAME 通知 APPSERVICE 渲染状态
加载小程序系统配置文件
配置信息
APP 信息
appid
Tabbar 信息
tabbar 列表
tabar 样式
Navigator 信息
navigate 样式
场景信息
其他信息
创建 APPSERVICE
小程序加载时,先创建 APPSERVICE webview
APPSERVICE webview 创建完成后
自动连接到 socket server
获取网络信息
获取粘贴板数据
其他
创建 HOME PAGEFRAME WEBVIEW
基于小程序配置,解析主页路径
创建主页 Webview,创建完成后
自动动连接到 socket server
发布 xWebVideoSupported 到 appservice
vdSync 到 appservice
GenerateFuncReady 到 appservice
通知 Socket Server 路由信息
Home page webview 创建之前,发送 onAppRoute 信息
Home page webview 创建后,发送 onAppRouteDone 信息
Socket server 转发路由信息
Socket server 转发控制层信息到 appservice
onAppRoute
onAppRouteDone
Service 通知 Page 渲染
Service 以消息的方式,通知 Page 渲染
vdSync * webview 信息同步
vdSyncBatch * webview 页面选择
invokeWebviewMethod * 通知 webiew 更新
Page 通知 Service 渲染状态
__DOMReady 消息
这个算是一个微信小程序启动经历的一些过程,只能说参考分析,比较不是开发人员不能准确说做来那些事
可能大家看了上面的内容还是比较模糊,最核心的消息事件是怎么处理的,有那些事件是怎么进行分发的,下面我还是会先来从设计层面先来分析一下
下面还是先看下一个图(整个的消息通信机制)
这个图如果你们深入研究过这块内容的应该都可以看懂 service webview socket 之间的关联,下面我还是会简述一下。
所有的消息类型
APPSERVICE_ON_EVENT
APPSERVICE_INVOKE
APPSERVICE_INVOKE_CALLBACK
APPSERVICE_PUBLISH
WEBVIEW_ON_INVOKE
WEBVIEW_ON_INVOKE_CALLBACK
WEBVIEW_PUBLISH
APPSERVICE_ON_EVENT
发送方
控制层
接收方
APPSERVICE
WEBVIEW
消息处理
无特殊处理
APPSERVICE_INVOKE
发送方
APPSERVICE
接收方
APPSERVICE
WEBVIEW
消息处理
调用 API
返回 APPSERVICE_INVOKE_CALLBACK 消息
APPSERVICE_PUBLISH
发送方
APPSERVICE
接收方
WEBVIEW
消息处理
无特殊处理
WEBVIEW_ON_INVOKE
发送方
WEBVIEW
接收方
WEBVIEW
消息处理
调用 API
返回 WEBVIEW_ON_INVOKE_CALLBACK 消息
WEBVIEW_PUBLISH
发送方
WEBVIEW
接收方
APPSERVICE
消息处理
无特殊处理
在微信开发者工具里面采用的这种无阻塞消息通讯可以更好的处理这些事件之间的关联性和灵活性,这种方式具备的特点:
发送方可以随时向 socket server 发送消息
发送方可以向任意接收方发送消息,无论接收方是否存在
接收方可用时,发送给接收方的消息可以即时送达
消息不丢失
但在我们手机上面使用的微信小程序,微信肯定不是采用这种方式的,应为这种方式最大的问题就是效率和稳定性,在原生上面应该采用桥接的方式
本来打算放一些案例的,后来发现写下来都没有代码本篇比较存粹的讲解下小程序的架构,希望可以帮大家对小程序运行环境理解带来一点小小帮助
评论