7.基于Web内核的微信小程序框架实践-陈博学

1 .基于Web内核的微信小程序框架实践 陈博学 Email: boxuechen@tencent.com 

2 .个人介绍 • 2014年加入腾讯 • 2015年加入微信终端开发 • Android 小游戏渲染引擎 • 小程序同层渲染和Canvas组件 • 微信XWeb浏览器内核 • 研究Chromium内核排版渲染 • 目前负责PC微信小程序跨平台框架 

3 . 3 背景 基于Web内核的小程序框架 ⚫ 和微信主客户端解耦，可以独立运行小程序和小游戏的一套Runtime ⚫ 基于Chromium内核，拥抱Web特性，支持更多平台。 ⚫ 拓宽小程序生态边界，为更多非移动平台设备提供微信生态支持。 ⚫ WMPF ： Wechat Mini Program Framework 

4 .目录 ◼ 小程序和PWA ◼ 基于Chromium内核的小程序框架 ◼ 基于Chromium内核的小游戏框架 ◼ 进程架构&跨平台实践 

5 . 01 小程序和P WA 

6 . 6 小程序和PWA 小程序框架简介 视图层 逻辑层 ◼ 视图层：WebPage Page ◼ 逻辑层：独立的 JS Runtime SetData WXML JSAPI ◼ JS绑定：为JSApi提供Native能力 WXSS ◼ SetData：数据和事件传递 Web内核 V8/JavaScriptCore Event Data Data Event JS绑定 微信能力 文件 网络 音频 视频 地图 插件 GPS/Worker/…… 

7 . 7 小程序和PWA PWA简介 Web内核 Index.html sw.js ◼ 运行在Web内核中 Page ◼ index.html: 视图层，可执行JSAPI PostMessage HTML JSAPI CSS ◼ sw.js：service线程，管理PWA生命周期，可执行JSAPI JSAPI Render线程 ServiceWorker线程 ◼ WebIDL绑定：fugu project，H5 API ◼ PostMessage：数据和事件传递 WebIDL 绑定 音频 文件 网络 蓝牙 Canvas 视频 WebGL GPS/Worker/…… （third_party/blink/renderer/modules） 

8 . 8 小程序和PWA 小程序和PWA对照 微信小程序 PWA 1. Web内核渲染 1. Web内核渲染 2. HTML和CSS 视图端 2. WXML和WXSS 3. JSAPI 1. Web内核提供的JS线程 1. 独立JSRuntime线程 2. WebIDL绑定扩展JSAPI 逻辑端 2. JS绑定扩展JSAPI 3. PostMessage通信 3. setData通信 4. 生命周期管理 1. 开发者代码运行在沙箱环境 1. 开发者对代码有完全控制 其他 2. 微信私有接口 2. H5 API标准接口 

9 . 9 小程序和PWA 向PWA学习 理想方案 ➢ 轻量的JS Worker线程，不需要额外的 V8/JSCore环境 学习PWA ➢ PostMessage 高性能通信 ➢ 丰富的H5 API （Canvas/ WebSocket等） 易扩展JSAPI 沙箱环境 跨平台 深入Web内核，定制小程序框架 

10 . 02 基于Chromium内核的小程序框架 

11 . 11 基于Chromium内核的小程序框架 基于Chromium内核的小程序框架 Chromium 内核 视图层 逻辑层 Renderer线程 XWeb Worker线程 运行环境：Chromium内核 JsApi Page PostMessage ◼ 视图层：Renderer线程的Page WXML canvas 网络 音频 WXSS Inject ◼ 逻辑层：XWeb Worker线程 视频 Node Modules NodeJs 。。。 ◼ JS绑定：集成Node ◼ JSAPI： H5 API + Node API ◼ PostMessage：数据和事件传递 

12 . 12 基于Chromium内核的小程序框架 设计XWeb Worker Chromium创建Web Worker ⚫ blink/render/core/workers ⚫ Web Worker的JS运行环境，来自 WorkerGlobalScope 

13 . 13 基于Chromium内核的小程序框架 设计XWeb Worker ⚫ 参考 SharedWorker 流程，设计 XWebWorker ⚫ 共享 V8 ⚫ H5 API 接口 ⚫ PostMessage 通信 

14 . 14 基于Chromium内核的小程序框架 JSAPI能力支持 Chromium内核集成 Node ◼ 参考Electron思路 Chromium Message Loop Node Libuv ◼ 消息循环融合 ◼ Node Libuv ◼ Chromium MessageLoop ◼ 《Electron Internals: Message Loop Integration》 

15 . 15 基于Chromium内核的小程序框架 JSAPI能力支持 XWeb Worker Web能力 Node能力 ➢ H5 API 能力 PostMessage File ➢ Node API 能力 WebSocket Http ➢ Node的 Addon 灵活扩展 OffscreenCanvas Socket WebWorker …… …… Browser Thread 

16 . 16 基于Chromium内核的小程序框架 沙箱能力支持 Node VM方案不可行 ➢ 沙箱能力隔离JS执行上下文，安全保证 ➢ Web Worker自身没有创建沙箱的能力 ➢ Node VM 不可用 

17 . 17 基于Chromium内核的小程序框架 沙箱能力支持 Iframe Web Worker Service Worker Chromium封装V8::Context的分析 ⚫ Iframe ⚫ Web Worker 

18 . 18 基于Chromium内核的小程序框架 沙箱能力支持 XWeb Worker VM 实现XWeb Worker VM JSAPI CreateVMContext; ⚫ 核心类 VMWorkerGlobalScope Web Worker Service Worker SetVMContextGlobal； RunInVMContext; ⚫ 导出 VMContextAPI 给JS使用 DestroyVMContext. 

19 . 03 基于Chromium内核的小游戏框架 

20 . 20 Native能力 WMPF 基于Chromium内核的小游戏框架 方案调研 逻辑层方案 方案 Runtime 移动端小游戏框架介绍 ⚫ 与Web内核无关 ⚫ JS运行环境：V8、JavaScriptCore ⚫ OpenGL ES 实现 Canvas 2D 和 WebGL ⚫ JS绑定，提供JSAPI 

21 . 21 基于Chromium内核的小游戏框架 基于Chromium内核的小游戏框架 Chromium内核 小游戏框架 Renderer线程 ◼ 运行环境：Chromium内核 ◼ Render线程，作为JS线程 cocos Laya …… ◼ JSAPI：H5 API + Node JS API canvas webgl 网络 音频 视频 文件 … Node Addon 

22 . 22 基于Chromium内核的小游戏框架 JSAPI能力支持 Render 线程 Web能力 Node能力 ➢ H5 API 能力 Canvas File WebGL Http ➢ Node 融入到 Render 线程 Web Audio Socket ➢ Node Api Web Video ➢ Node的 Addon 能力扩展 …… …… Browser Thread 

23 . 23 基于Chromium内核的小游戏框架 沙箱能力支持 Chromium内核 Renderer线程 ◼ 使用Iframe提供独立的 js context； Main Frame ◼ 修改Chromium内核，禁用iFrame中的 DOM和BOM接口 iFrame 

24 . 04 进程模型&跨平台实践 

25 . 25 进程模型&跨平台实践 进程模型 Host process Browser process miniprograme IPC miniprogram ◼ Host进程，PC微信 manager Renderer process minigame ◼ Chromium 多进程模型 ◼ Browser 进程 minigame IPC launch manager Renderer process ◼ Render进程：小程序和小游戏 IPC host desktop manger ◼ IPC 通信 miniprograme JsApi miniprogram IPC manager Renderer process 低耦合、高容错 IPC IPC GPU process 

26 . 26 进程模型&跨平台实践 跨平台SDK ◼ Chromium跨平台特性 ◼ 多个平台，使用同一份源码 ◼ SDK 可独立使用 ◼ PC 微信集成 

27 . 27 进程模型&跨平台实践 Windows平台演示 

28 . 28 进程模型&跨平台实践 Linux平台演示 

29 . 29 进程模型&跨平台实践 Android NDK 平台 ◼ 不依赖Android Java代码 ◼ NDK工具链编译Chromium ◼ Android Native Framework ◼ SurfaceFlinger 和 Input Manager ◼ 实现 Chromium Ozone