HarmonyOS开发者限时福利来啦!最高10w+现金激励等你拿~ 了解详情
写点什么

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

  • 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:301904

评论

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

这次是运行在 Intel AIxBoard™ 开发板上的 TDengine 预测“未来”

爱倒腾的程序员

PoseiSwap:通过 RWA 的全新叙事,反哺 Nautilus Chain 生态

大瞿科技

Centos7系统中找不到yum及安装方法。

百度搜索:蓝易云

云计算 Linux centos 运维 yum

解析架构设计:构建可靠、高效的软件系统

前端连环话

前端架构 架构设计 前端工程化 技术 优化体系

[开源]免费开源MES系统

万界星空科技

开源

RLHF 技术:如何能更有效?又有何局限性?

Baihai IDP

人工智能 强化学习 白海科技 RLHF 大语言模型

TypeScript 玩转类型操作之字符串处理能力

小乌龟快跑

typescript 面试 前端

企业号 8 月 PK 榜,火热开启!

InfoQ写作社区官方

热门活动 企业号 8 月 PK 榜

细数不懂Spring底层原理带来的伤与痛

java易二三

spring 程序员 Spring Boot 计算机 底层原理

微信业务架构图&学生管理系统架构设计

艾瑾行

架构实战营

竞速榜实时离线对数方案演进介绍 | 京东云技术团队

京东科技开发者

实时数据 企业号 7 月 PK 榜 竞速榜 离线数据

面试官:说出 Java 中的 7 种重试机制

java易二三

编程 程序员 面试 计算机

乘风出海 提前锁定HDC2023耀星·领航出海论坛

最新动态

未来前端框架将持续推进组件化开发

没有用户名丶

零信任体系化能力建设(1):身份可信与访问管理

权说安全

Linux系统安装gcc详细教程。

百度搜索:蓝易云

云计算 Linux 运维 服务器 GCC

飞桨AI Studio可以玩多模态了?MiniGPT4实战演练!

飞桨PaddlePaddle

人工智能 百度 paddle 飞桨 百度飞桨

火山引擎AB测试:广告实验深度打通巨量引擎,高效测试广告素材

字节跳动数据平台

大数据 A/B测试 对比试验 企业号 7 月 PK 榜 数字化增长

特性快闪:使用 Databend 玩转 Iceberg

Databend

【华秋干货铺】一文轻松搞定PCB叠层和阻抗设计

华秋电子

7月征文活动结果出炉,快来看看有没有你

InfoQ写作社区官方

热门活动 年中技术盘点

解析游戏陪练app源码的开发与意义

山东布谷网络科技

游戏 开源代码 APP软件开发

Android 架构模式如何选择

vivo互联网技术

mvc Compose MVVM 解耦 MVI

javascript运算符与流程控制

timerring

JavaScript

Java高级特性——反射

java易二三

Java 编程 计算机

Java Web应用开发案例|模拟12306抢票

TiAmo

Java javaWeb 开发实例

直播平台源码开发,信息收发功能搭建

山东布谷科技

软件开发 直播 源码搭建 消息发送 直播平台源码

Spring AOP 中的代理对象是怎么创建出来的?

江南一点雨

Java spring

【实践篇】最全的【DDD领域建模】小白学习手册(文末附资料) | 京东云技术团队

京东科技开发者

架构 DDD 领域建模 企业号 7 月 PK 榜

MYSQL中JSON类型介绍 | 京东物流技术团队

京东科技开发者

json MySQL 数据库 企业号 7 月 PK 榜

你不知道的ES2023 | 京东云技术团队

京东科技开发者

JavaScript ecmascript 前端 ECMAScript 6 企业号 7 月 PK 榜

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