写点什么

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

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

评论

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

Serverless 下的微服务实践

Serverless Devs

阿里云 Serverless 架构 微服务

从一道 LRU 算法题说到缓存淘汰策略

Java 程序员 后端

什么是分布式系统,如何学习分布式系统

Java 程序员 后端

今日话题:程序员,从培训班出来的都是垃圾?你们是怎么看待的

Java 程序员 后端

从JVM锁到Redis分布式锁,对小白十分友好

Java 程序员 后端

JavaScript 进制问题

空城机

JavaScript 11月日更

京东T7团队技术4面:线程池+索引+Spring +分布式锁

Java 程序员 后端

京东T7架构师用470页就把微服务架构原理与开发实战文档讲完了(1)

Java 程序员 后端

什么?JDK16刚刚又发布了?赶紧尝尝鲜

Java 程序员 后端

五分钟带你读懂!Spring Cloud构建微服务分布式云平台

Java 程序员 后端

什么!有一定的学习门槛你就学不好?Java多线程,从基础到并发模型统统帮你搞定!

Java 程序员 后端

什么会导致Java应用程序的CPU使用率飙升?

Java 程序员 后端

什么才是Java的基础知识?

Java 程序员 后端

今年面试大厂屡屡失败,一波三折最终入职拼多多java岗,我经历啥?(1)

Java 程序员 后端

Serverless 工程实践 | 快速搭建 Kubeless 平台

Serverless Devs

k8s 架构设计 框架搭建 框架学习

京东T7架构师手写的10万字Spring Boot详细学习笔记+源码免费下载

Java 程序员 后端

2021 大厂面试题之 mysql 篇

小麦

MySQL 面试题 大厂

京东T7架构师用470页就把微服务架构原理与开发实战文档讲完了

Java 程序员 后端

人机交互系统(2

Java 程序员 后端

从三线城市公司跳槽美团关键,啃透了腾讯T8-3手写Java高级笔记

Java 程序员 后端

docker基础

小麦

京东员工被裁后哀叹:优化后连面试的机会都没有,每月还要还贷款

Java 程序员 后端

模块三

侠客行

架构实战 「架构实战营」

从SpringBoot源码看资源映射原理

Java 程序员 后端

什么是事务数据库?

Java 程序员 后端

今年面试大厂屡屡失败,一波三折最终入职拼多多java岗,我经历啥?

Java 程序员 后端

五分钟带你读懂!Spring Cloud构建微服务分布式云平台(1)

Java 程序员 后端

Serverless 架构模式及演进

Serverless Devs

Serverless 架构设计

京东秒杀系统是世界上最牛批的,不接受反驳!(1)

Java 程序员 后端

京东秒杀系统是世界上最牛批的,不接受反驳!

Java 程序员 后端

用EasyRecovery怎么恢复电脑中已删除的视频

淋雨

数据恢复

  • 扫码添加小助手
    领取最新资料包
实现微信小程序编译和运行环境系列(核心篇一)_语言 & 开发_风逝_InfoQ精选文章