写点什么

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

  • 2020-04-30
  • 本文字数:2086 字

    阅读完需:约 7 分钟

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

因为一些小伙伴的私信和交流,感觉写的这些内容对别人还是有一些帮忙,所以打算剩下的几篇更新频率会快一些争取一星期一篇,应该还可以在写 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 发送消息

  • 发送方可以向任意接收方发送消息,无论接收方是否存在

  • 接收方可用时,发送给接收方的消息可以即时送达

  • 消息不丢失


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


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


2020-04-30 16:302116

评论

发布
暂无评论
发现更多内容

《2023 中国信通院IOMM企业数字化转型发展双象限洞察》发布,转型者象限&赋能者象限各有40+企业上榜

信通院IOMM数字化转型团队

数字化转型 IOMM ICT深度观察

「模问题」AI原生小游戏强势来袭,一起为AI失眠吧!

飞桨PaddlePaddle

人工智能 游戏 文心大模型 AI原生应用

企业门户平台全功能解析:从界面到集成,一站式管理与整合

天津汇柏科技有限公司

企业 统一门户

Wireshark网络工具

小齐写代码

主馆位置即将售罄“2024北京信息通信展会”众多知名企聚京城

AIOTE智博会

通信展 信息通信展

用友BIP国资云赋能国资监管迈入智能化新局面

用友BIP

国资监管

解决网络协议服务器问题的关键:定位能力与抓包技术

华为云开发者联盟

网络协议 开发 华为云 华为云开发者联盟

2024年 Kubernetes 四大趋势预测

SEAL安全

Kubernetes 企业号12月PK榜 12 月 PK 榜

Prompt Tuning:大模型微调的实战技巧

百度开发者中心

深度学习 大模型 Prompt

数仓调优实践丨SQL改写消除相关子查询

华为云开发者联盟

数据库 大数据 华为云 华为云开发者联盟 华为云GaussDB(DWS)

利用Prompt学习更多示例,提高大模型性能

百度开发者中心

人工智能 模型

中国机械总院:大型集团视角下的智能费控与支出管理

用友BIP

业财融合

大模型加持下,AI招聘的“下一站”

用友BIP

AI招聘

【收藏】法律人办案必备检索网站最新汇总!附检索技巧

科技汇

大数据从业者必知必会的Hive SQL调优技巧 | 京东云技术团队

京东科技开发者

技术译文 | 微服务测试——契约测试

AREX 中文社区

微服务 测试 契约测试

生成式 AI 的下一阶段将走向何方?

Baihai IDP

深度学习 程序员 AI 白海科技 GenAI

【奶奶看了都会】ComfyUI+SVD制作AI视频教程,附效果演示

卷福同学

AIGC AI绘画 Stable Diffusion AI视频 ComfyUI

从容器的发展历史理解容器的本质

华为云开发者联盟

云计算 云原生 后端 华为云 华为云开发者联盟

企业财务团队如何进行转型升级?

智达方通

全面预算管理 财务团队 财务转型

重塑招聘的价值,AI能扮演好企业的“人才捕手”吗?

用友BIP

AI招聘

文心一言 VS 讯飞星火 VS chatgpt (164)-- 算法导论13.1 4题

福大大架构师每日一题

福大大架构师每日一题

制造业进项税额转出全场景数智化管理

用友BIP

共建共享,创新同行!飞桨星河社区助力大模型时代开发者砥砺前行

飞桨PaddlePaddle

人工智能 开发者 WAVE SUMMIT

实现微信小程序编译和运行环境系列(核心篇一)_语言 & 开发_风逝_InfoQ精选文章