1. 饿了么跨端技术的演 进、实践与落地 饿了么前端工程负责人 / 刘宇

2. 目录 • 跨端技术背景与演进历程 • 基于小程序跨端的行业现状和思考 • 基于小程序 DSL 的跨端解决方案 • 展望未来

3. 跨端技术背景与 演进历程

4. 跨端，跨的究竟是哪些端？ 设备 平台 操作 系统 移动 应用 渲染 容器 PC/Mobile/OTT/IoT Android/iOS/HarmonyOS 微信/支付宝/手淘/抖音 Webview/ReactNative/Flutter

5. 移动跨端技术演进历程

6. 饿了么跨端投放现状 — 概览 渠 道 O2O 业务特点 围绕线上线下服务 流 量 多行业精细化运营 线 上 用户流量、订单规模对大盘贡献度高 线 下 区域 经营 业 务 到家 零售 …… 物流 多形态多渠道投放 时空体验规模成本 新渠道也在持续涌现和接入中 SaaS …… 经营诉求 商家：曝光和成交 服务 时、空、人、货 曝光、成交 消费者 平台 商家 平台：规模和流量

7. 饿了么跨端投放现状 — 问题、诉求和策略 渠 道 问 题 渠道差异与限制 渠道的运行环境 渠道的流量特性 渠道的业务定位 渠道的管控规则 高度不确定性 渠道环境不确定性 1. 商业能力与产品思路 2. 能力成熟度与完整度 3. 研发配套（语法、工具） 业务诉求不确定性 1. 用户特性与诉求 2. 渠道定位 应用复杂度提升 业务关联关系 团队协作模式 功能对⻬策略 能力感知范围 3. 业务运营策略 小程序（主）+ H5（辅）：N 个渠道、N 个业务、N 个应用、N个框架、N个团队 诉 求 渠道业务灵活性？ 研发体验和效率？ 策 略 围绕“研发体验一致性提升与复杂应用 协作机制改进”双向保障业务高效迭代

8. 饿了么跨端投放现状 — 残酷的现实 理想 推动框架统一 现实 降本增效 研发框架升级大概率带来业务重构 实现一码多端 思考 渠道流量 小程序 > H5 影响与成本 前端协同需求 vs 差异化视⻆与节奏 决策：以小程序为第一视⻆来实现多端

9. 基于小程序跨端的行业 现状和思考

10. 业界有哪些面向于小程序的研发框架？ 共同的特点：基于 React 或者 Vue DSL

11. 为什么饿了么选择以小程序 DSL 为基础实现跨端？ 上述开源框架能否解决我们面临的问题？ —— 并不能 衡 量 因 素 改造 成本 性能 体验 业务 协同 淘支微小程序运营多年 存量业务多以支付宝或 微信小程序 DSL 编写 渠道业务是重要的流量阵地 重视程度与 App 无差 对性能和体验要求高 每个渠道都是一个小型饿了么 App 业务复杂度高/多业务域协同 应用集成困难/全链路功能衔接困难 以小程序 DSL 构建跨端解决方 案

12. 基于小程序 DSL 的 跨端解决方案

13. 如何解决小程序多端编译？ 目标 差异 分析 衡量 因素 方案 选择 适配 单端 多端 JSAPI 差异 配置差异 文件类型差异 模版指令差异 语法差异 生命周期差异 引用方式差异 功能支持差异 自定义组件差异 …… 性能和体验 编译时（重） 运行时（轻）

14. 如何解决小程序多端编译 — 静态编译原理 小 程 序 静 态 编 译 原 理 JS Typescript 模块 运行时 抹平注入 引用 JS 配置差异 小程序 WXS/SJS Typescript 模块 运行时 抹平注入 引用 WXS/SJS 文件类型差异 支付宝小程序 微信小程序 模版 Files 微信/支付宝 小程序 DSL WXML/AXML 内置 组件 事件 代理 属性 特殊 语法 PostHtml 指令 模版指令差异 QQ 小程序 WXML/AXML/QML/ SWAN/TTML 百度小程序 解决 引用方式差异 字节小程序 JSON JSON 配置项 引用 钉钉小程序 JSON 淘宝小程序 功能支持差异 语法差异 快手小程序 WXSS/ACSS PostCSS 选择器 引用 WXSS/ACSS/QSS/ CSS/TTSS …… 项目源文件 源码类型 文件类型 转换层 多端产物 Source Source Type Type Trans former Outcome

15. 如何解决小程序多端编译 — 运行时补偿原理 小 程 序 启 动 运行小程序跨端 API 转 换代码 业务 Solution 执行 初始化 Plugin 并 注册生命周期 触发注册 App 初始化插件逻辑 App 初始化 JSAPI 差异 触发注册 App 生命周期插件逻辑 生命周期差异 执行 createPage/ wPage/aPage 入口函数调用 运 行 时 动 态 补 偿 执行 createApp/ wApp/aApp 入口函数调用 触发 Page 初始化 插件逻辑 注入 Mixins 支持 转换 Page 多端结构和 逻辑差异 Page 初始化 Page 生命周期 多端差异抹平 触发注册 Page 生命周期插件逻辑 解决 实例方法差异 自定义组件差异 运行时扩展 执行 createComponent wComponent/ aComponent 入口函数调用 触发 Component 初始 化插件逻辑 注入 Mixins 和 Behavior 支持 转换 Component 多端 结构和逻辑差异 Component 初始化 Component 生命期 多端差异抹平 执行小程序 Component 函数 ……

16. 如何解决小程序转 Web？ 业务 投放 细分渠道或非小程序环境渠道 银行金融渠道、客户端极小包、广告投放等以 H5 来承接 衡量 因素 研发成本和维护成本 方案 小程序转 Web 独立维护一套 H5 划不来 编译时 + 运行时

17. 如何解决小程序转 Web — 编译原理 小 程 序 静 态 编 译 原 理 JS WXS/SJS Typescript Typescript 模块 模块 运行时 抹平注入 运行时 抹平注入 引用 JS 重点解决 WXS/SJS JS 模版 Files 引用 微信/支付宝 小程序 DSL WXML/AXML 内置 组件 Web 事件 代理 WXML/AXML PostHtml 指令 属性 React 组件 特殊 语法 JSON JSON 配置项 引用 JSON WXSS/ACSS PostCSS 选择器 引用 WXSS/ACSS CSS 项目源文件 源码类型 文件类型 转换层 多端产物 Source Source Type Type Trans former Outcome Web 组件 Web 应用 • 将 JS、WXS/ SJS、WXML/ AXML、JSON 文件合并为 JS 文件并转换为 React 组件 • WXSS/ACSS 转 换为 CSS 文件

18. 如何解决小程序转 Web — 运行时原理

19. 如何解决多端多形态的问题？ 痛点：由于形态差异，各端分别维护一套代码 入淘：支付宝小程序接入淘宝作为小程序插件 方案：消除形态差异（业务难以适配的部分） • getApp 差异 • App 应用生命周期差异 入微：支付宝小程序接入微信作为小程序分包 入支：微信分包接入支付宝作为小程序插件 • 全局样式差异 • NPM 使用限制 • 接口调用限制 入饿：支付宝小程序插件接入饿了么作为小程序 …… • 路由差异 ……

20. 形态差异解决办法举例 — 生命周期与全局函数

21. 形态差异解决办法举例 — 全局样式

22. 形态差异解决办法举例 — NPM 构建支持

23. 如何治理 “复杂小程序”？ 解决应用架构与研发协作问题 特征 表现 跨业务领域 应用形态多样 ⻓周期 业务诉求多样 多团队协同 关联业务面广 主链路+多分支 …… “复杂小程序”的定义

24. 如何治理 “复杂小程序” — 业务示例、问题剖析与解法 饿了么微信小程序 业务形态 主包：首⻚、订单、我的 频道分包 核心痛点 高耦合 流程弱 编译慢 体积大 店铺分包 搜索分包 评价分包 零售分包 地址分包 会员分包 分包 x N 由 主包+ N个分包组合而成 N个业务相互耦 合，无法独立部 署，研发效率低 研发流程不规范， 业务稳定性较差， 发版质量难以保障 所有分包编译完才 能预览，单一分包 失败导致整体失败 整包大小接近大小 上限，存在大量重 复依赖 解决方案 线下线上结合的集成研发能力

25. 如何治理 “复杂小程序” — 线下集成研发 集成前：各个业务以不同形态存在 相互解耦，独立研发、调试、部署 独 立 小 程 序 业务 A 小程序 小 程 序 插 件 业务 D 插件 小 程 序 分 包 小 程 序 宿 主 业务 B 小程序 小程序形态转换 集成与基础能力注入 业务 C 小程序 复杂小程序集成 业务 D 分包 业务 E 插件 业务 E 分包 集成后：合并为一个完整小程序 宿主 + 多形态业务 + 依赖及⻚面聚合 业务 F 插件 业务 F 分包 宿主小程序 （小程序宿主，提供基础能力） 通信机制 业务 A 分包 业务 B 分包 业务 C 分包 业务 D 分包 业务 E 分包 业务 F 分包 业务 G 分包 业务 H 分包 业务 I 分包 路由约定 能力注入 模块编译 模块合并 产物复用 数据隔离 依赖共享 完整小程序 （小程序宿主，提供基础能力，由各个分包消费）

26. 复杂小程序 — 线上研发协作

27. 再进一步，多端业务最佳实践 渠道投放 业务 功能 业务 2 业务 3 业务 4 业务 5 …… 业务 N 统一应 用主体 渠道 业务 场景化 多 端 应 用 分 层 架 构 业务 1 多端 形态 多业务/多场 景/多形态 小程序主包 小程序分包 小程序插件 Application 渠道应用主体 业务灵 活闭环 渠道扩 展策略 业务差异分层定制 研发能力定制 基础框架扩展 壳工程 工程化 研发框架及 平台 基 础 能 力 供 给 产品能 力承接 基础 API 产品⻚面 业务组件 账号绑定 定位管理 工具库 网络请求 全局路由 安全⻛控 数据 & 实验 Framework 宿主应用框架 基础组件 Webview 最佳实践 研发 支撑 基础服务 研发规范 动线时序策略 多端研发框架 工具配套 配置化运行 渠道编译配置 运行时业务配置 标准化接入 统一接口标准 渠道差异抹平 监控 & 快排 多端组件库 通 用 能 力 沉 淀 轻量化的 宿主工程 标准化的 能力沉淀 授权登录 标准化 DSL及研发 规范 抽象模块 渠道扩 展定制 基础性能优化 中心化管理 多端研发平台 SDK 统一收口 能力服务可插拔 多端研发规范 基础能力 持续升级 …

28. 跨端成果 — 业务效果 & 研发提效 饿了么支付宝小程序 饿了么微信小程序 饿了么淘宝小程序 饿了么淘特小程序 • 研发提效：采用一码多端和集成研发模式的业务平均提效 70%，同构的端越多提效越多 • 多端占比：饿了么内部 85%+ 的多端业务基于该方案实现多渠道业务研发和投放 • 业务覆盖：涵盖了饿了么全域等各个业务板块 饿了么抖音小程序 饿了么M站（Web）

29. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 编译 分析 预览 插件 集成 构建 脚手架 多端 Mock 统计 MorJS 多端研发框架 技术能力 开源 https://github.com/eleme/morjs

30. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 架构呈现 入口增强 标准小程序工程 小程序分包工程 小程序插件工程 Mor 编译插件工程 运行时插件工程 运行时 Solution 工程 初始化 init/create 脚手架 @morjs/plugin-generator 模版生成 generate 小程序组件 小程序模版 小程序⻚面 运行时 核心库 @morjs/ core 支付宝小程序支持 @morjs/plugin-compiler-alipay 微信 DSL 多端编译 小程序App aApp 小程序⻚面 aPage 小程序组件 aComponent 小程序插件 aPlugin 拓展能力 代码混入 Mixin 通信 / 共享 Share 生命周期 Hooks 插件能力 Plugin 微信小程序支持 @morjs/plugin-compiler-wechat 支付宝 DSL 解决方案 Solution QQ 小程序支持 @morjs/plugin-compiler-qq 条件编译 工程化 支撑 @morjs/cli 实现 细节 文件/代码纬度 编译 @morjs/plugin-compiler 多端组件支持 多端形态一体 小程序 分包 可 扩 展 编 译 插 件 架构 设计 字节小程序支持 @morjs/plugin-compiler-bytedance 钉钉小程序支持 @morjs/plugin-compiler-dingding 淘宝小程序支持 @morjs/plugin-compiler-taobao 分析 @morjs/plugin-analyzer Mock @morjs/plugin-mocker 多端研发 规范 小程序宿主、分包、插件、模块等可插拔机制研发规范 运行时 基础库 @morjs/ api 快手小程序支持 @morjs/plugin-compiler-kuaishou 插件 集成 @morjs/plugin-composer 基础能力 百度小程序支持 @morjs/plugin-compiler-baidu Web 应用支持 @morjs/plugin-compiler-web 技术 思考 差异兼容 API 事件派发 Event 上下文管理 Context 路由约定 Navigate 状态管理 Store 网络请求 Request 多端兼容 运行时 适配库 小程序运行时兼容 runtime-mini Web 运行时兼容 runtime-web compose 命令支持，提供 宿主、分包、插件、模块 等的集成功能及可插拔机制 Mor 生态（规划中） Mor UI 组件库 analyze 命令支持，提供 代码分析检查、依赖分析和包大小分析等功能 开源 生态 小程序多端开发工具 & 套件 & 插件扩展规范 社区生态（规划中） 社区小程序 原生组件库 Mock 能力支持，提供了标准化的 mock 能力，如 JSAPI、网络请求等 小程序 JS 依赖库规范 小程序多端组件库规范 Mor 社区插件 开源 Utils 等 小程序多端运行时规范

31. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 支持情况 2 种 DSL 4 种 形态 9 个 平台 微信小程序 DSL 小程序 / 小程序插件 微信/支付宝/百度/字节 支付宝小程序 DSL 小程序分包 / 小程序多端组件 快手/钉钉/手淘/QQ/Web

32. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 特性介绍

33. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 使用案例 微 信 小 程 序 支 付 宝 小 程 序 抖 音 小 程 序 淘 宝 小 程 序 H5

34. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 用户原声 效果还不错！ 当前市面最接地气的小程序框架 ? MorJS 考虑支持下快应用么？ 是否 KPI 项目，会⻓期维护么？ 赞！帮我解决了微信小程序转 H5 的问题 对比 Taro 和 UniApp 的优势是 什么？ 支持社区组件库么？ 有状态管理（Store）支持么？

35. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 初心 非 KPI 项目 大量项 目使用 ⻓期持 续迭代 历经数 年打磨

36. 能力沉淀 — 饿了么自研 MorJS 多端研发框架 — 社区服务 欢迎使用钉钉 扫码加入 群号：29445021084

37. 展望未来

38. 未来与愿景 MorJS 框架 面向未来 愿景 提升多端可用度 完善社区组件库兼容 扩展编译目标平台 成为小程序多端 研发的基础设施

39.