红帽白皮书新鲜出炉!点击获取,让你的云战略更胜一筹! 了解详情
写点什么

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

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

评论

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

第八周学习性能优化 2 总结

三板斧

极客大学架构师训练营

炸了!一口气间了我18个JVM问题!

面试 jvm调优 JVM垃圾回收原理

python+flask编写一个简单的登录接口例子

测试人生路

Python 接口测试

架构师训练营 1 期 - 第八周 - 性能优化 2

三板斧

极客大学架构师训练营

前端如何一键生成多维度数据可视化分析报表

徐小夕

Java node.js 大前端 React 数据可视化

Nacos配置中心和服务的注册发现

牛初九

微服务 Spring Cloud nacos spring cloud alibaba

关于静态分析技术符号执行,从一个故事讲起······

华为云开发者联盟

代码 分析 静态

如何使用JavaScript实现前端导入和导出excel文件(H5编辑器实战复盘)

徐小夕

Java node.js 大前端 React 数据可视化

LeetCode题解:剑指 Offer 22. 链表中倒数第k个节点,递归,JavaScript,详细注释

Lee Chen

算法 大前端 LeetCode

阿里又出一座丰碑!P9级架构师整合出最新最全微服务1700页手册,下载下来慢慢啃

Java架构追梦

Java 架构 微服务 springboot SpringCloud

不服!阿里P8手写489页SQL优化通关手册,解决你百思不得其解问题

996小迁

sql 程序员 架构 面试 计算机

28天刷完这份内容多大349页的阿里Java面试通关手册,我成功闯进了字节跳动!

Java架构之路

Java 程序员 架构 面试 编程语言

手把手教你使用ModelArts的自动学习识别毒蘑菇分类

华为云开发者联盟

学习 AI 图像识别

七张图了解Kubernetes内部的架构

网管

Kubernetes k8s k8s入门

技术实践丨基于MindSpore的ResNet-50蘑菇“君”的识别应用体验

华为云开发者联盟

网络 mindspore 识别推理

看完之后,不要再说不懂代理IP了!

前嗅大数据

大数据 静态IP 代理IP 短效代理 动态IP

58个基础案例+2个综合案例带你探索微服务的神秘世界

小Q

Java 学习 编程 面试 开发

程序员在编程过程中,经常会在代码中使用到“where 1=1”,这是为什么呢?

小Q

Java 数据库 学习 架构 面试

【再见 — JVM】,需要”我”为你做些什么?

洛神灬殇

Java JVM Java 25 周年 1 周年盛典 InfoQ 写作平台 1 周年

嗯,挺全乎儿的,Spring Boot 多环境配置都在这里了,你喜欢哪种?

比伯

Java spring 编程 程序员 架构

天秀!这份由阿里数位大牛编写的777页高可用架构+MySQL

Java~~~

Java MySQL 编程语言 高并发 架构师

你应该知道的数仓安全——默认权限实现共享schema

华为云开发者联盟

数据库 数据 schema

解密猫晚直播技术:如何保障全球200多个国家和地区同时在线狂欢?

阿里云视频云

架构师训练营 1 期 -- 第八周作业

曾彪彪

极客大学架构师训练营

架构知识学习总结

小黄鱼

极客大学架构师训练营

朋友推荐我这份阿里面试通关手册,我却选择了字节的offer

小Q

Java 学习 程序员 架构 面试

架構師訓練營第 1 期 - 第 08 周作業

Panda

架構師訓練營第 1 期

成长为软件教练的三千大道之一

华为云开发者联盟

Java 敏捷开发

开源GitHub标星30K的腾讯Redis笔记,阿里技术专家看到都赞不绝口

小Q

Java 学习 编程 架构 面试

隧道视野效应 - 认知局限

石云升

教育 认知 隧道视野效应

架构师训练营 -week08-作业

大刘

极客大学架构师训练营

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