实现微信小程序编译和运行环境系列(核心篇一)

前言

因为一些小伙伴的私信和交流，感觉写的这些内容对别人还是有一些帮忙，所以打算剩下的几篇更新频率会快一些争取一星期一篇，应该还可以在写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 发送消息
• 发送方可以向任意接收方发送消息，无论接收方是否存在
• 接收方可用时，发送给接收方的消息可以即时送达
• 消息不丢失

但在我们手机上面使用的微信小程序，微信肯定不是采用这种方式的，应为这种方式最大的问题就是效率和稳定性，在原生上面应该采用桥接的方式

本来打算放一些案例的，后来发现写下来都没有代码本篇比较存粹的讲解下小程序的架构，希望可以帮大家对小程序运行环境理解带来一点小小帮助

原文地址github感觉有用的话点个star支持一下

欢迎持续关注

如果写的对你有一点点帮助的话，就随便帮下小明同学 感谢大伙 ！！！

一、 左下角点个赞再走吧，给博主一点关怀，可以让更多人看到

二、可以关注我的微信公众号「一起学Node」基于前后端NodeJs相关技术栈分享 交流 学习