当我们在 Web 里跑起了小程序

1. 当我们在 Web 里跑起了小程序香农前端工程师

2. 目录 01 小程序 Web 模拟器原理揭秘 02 Web 模拟器可以用来做什么事情 03 思考与展望

3. /01 如何在 Web 里运行小程序小程序 Web 模拟器原理揭秘

4. 支付宝小程序极简模型 WebView Worker 数据变更组件树维护 • 小程序的运行依赖特定环境，称为小程序容器 • 无法直接在浏览器里运行小程序 DOM视图刷新生命周期界面交互事件回调

5. Web 容器极简模型 Iframe Iframe Web Workers 数据变更组件树维护 • 为了在 Web 上运行小程序，需要模拟“跨线程” 架构 DOM视图刷新生命周期界面交互事件回调

6. 原生能力模拟基于浏览器 API / Node API 实现原生能力缓存多媒体界面 Web API 位置文件网络 Web API / Node API

7. /02 Web 模拟器可以用来做什么事情？ Web 模拟器的创新玩法

8. 内部小程序研发本地开发埋点验收质量分析质量保障

9. 创新玩法（1/5）- Web 研发 • 小程序命令行研发工具 • 轻量研发体验

10. 创新玩法（2/5）- 可视化埋点 • 可视化埋点 • 自动化埋点验证 • 规范埋点、提效

11. 创新玩法（3/5）- 场景验收 • 场景：⻚面状态或业务流程 • Mock + 模拟器渲染 • 场景录入 + 数据存储 • 随时体验一个产品的所有场景

12. 创新玩法（4/5）- 质量分析 • Puppeteer 驱动模拟器执行分析任务 • 基于 Chrome 调试协议获取渲染/网络/性能数据 • 定义指标出具质量分析 • 性能优化、内容审核

13. 创新玩法（5/5）- 质量保障 • 线上大量 JS 报错，很多是无关紧要的，作为开发者如何判断是否真的存在问题 • 将报错⻚面相关的数据灌注到模拟器中，对报错⻚面进行回放，确认当前⻚面是否存在潜在问题 • 自动化回放

14. 模拟器的创新玩法预览搭建测试回放巡检性能分析

15. /03 思考与展望 Web 模拟器给前端工程带来了什么

16. 给前端工程带来了什么（1/2）研发体验产品化 Chrome 模拟器真机 JSAPI 不支持部分支持完全支持同层组件不支持部分支持开发效率高调试体验好模拟器真机平台准确性较高高完全支持交互体验高一般高一般运维成本低高好一般接入⻔槛低高

17. 给前端工程带来了什么（2/2）接近真机的运行环境繁荣的 Web 生态测试框架 Chrome DevTools 云开发 Puppeteer 端外投放 Mock 工具

18. 展望未来 • 模拟器距离真机效果仍有差距 — 云真机？ • 跨平台特性如何更好利用 — 端外投放、PC 小程序？ • …

19. 谢谢观看