融合小程序框架

1. 融合小程序开发框架李志华- 小程序融合框架负责人 2023 Weimob Technical Salon 丨 FE 回复“沙龙” 进群与讲师互动

2. 李志华微盟 · 前端技术专家小程序融合框架负责人。主要负责小程序融合框架的前端架构设计、开发、底层能力设计。主要专注于小程序融合体系搭建，在该领域有丰富的经验。

3. 微盟技术沙龙「微盟技术沙龙」是由微盟发起并联合各方小伙伴为开发者举办的系列技术沙龙，从用户，产品，技术等方面与开发者进行交流。微盟技术沙龙关注开发者在实际应用中遇到的问题。提供最真实的干货，为广大的开发者提供最直接的交流平台。扫码关注公众号优质技术文章技术资料包直播交流群课件领取参与方式互动有奖扫描二维码进入直播交流群关注公众号回复"0520"， 1、关注【微盟技术中心】公公开转发本篇报名文章或直播获取讲师课件众号回复【沙龙】，加入本场间分享至朋友圈，并在【微盟活动的微信交流群与互动。技术中心】公众号回复【已转 2、关注【微盟技术中心】视发】，就可以参与微盟文化周频号预约本次活动直播。边抽奖啦！

4. 目录 01. 设计背景 Design Background 02. Problems and Challenges 问题与挑战 03. 技术解决方案 Technical Solution 04. 落地成果和规划 Achievements and Plans

5. 01. 设计背景 Design Background

6. 1. 设计背景公司业务场景的复杂度不断提高，需要融合不同的业务。提供统一的开发框架，使整个开发过程变得高效、高质量。使用同一套代码，构建出多个小程序平台目标代码。

7. 02. 问题与挑战 Problems and Challenges

8. 2. 问题与挑战包大小团队协作代码转换  小程序单个分包仅2M大小，无法承载过多内容 不同模块之间的静态文件或组件的引用方式  需要支持原生开发 & uni- app 开发  小程序整包大小最多20M 却需要承载整个wos 编码不规范导致模块相互之间相互影响  需要支持快捷转换成其他渠道的小程序代码  需要支持微盟云商户定制开发的空间要求  不同的开发框架（原生、 uni-app）  需要支持特殊场景的代码兼容性

9. 03. 技术解决方案 Technical Solution

10. 3.1 技术解决方案-简介模块化代码复用团队协作模块化管理，各个业务方可独立开发各自模块，通过脚手架统一构建，适合多团队协同开发；各团队可保留原有开发代码，代码复用率超90%；本地开发时支持不同形式的模块导入方式；多渠道产品融合支持编译到多渠道(支付宝、小红书、快手等) 不同模块的组合，实现产品层面上的融合，更细化的支持上层业务的小程序发布需求

11. 3. 2 技术解决方案-模块分类 platform 中台能力 package 业务能力矛盾一：各个团队都有公共文件，都想放在主包，但主包空间仅2MB 思路一：划分模块类型，规定platform放在主包， package放在分包矛盾二：并非所有公共文件都需要放在主包思路二： platform划分为main和extension，main在主包， extension下放到用到的分包内矛盾三：公共文件下放到分包时，会导致总包变大思路三：通过分包异步化能力，将extension内组件单独提取，构建异步分包

12. 3.3 技术解决方案-模块隔离如何解决不同团队编码不规范导致业务代码相互影响问题代码规范 VS 沙盒化相对简单实现难度相对困难可能需要进行很多修改代码改造成本无需修改或少量修改不注意就容易写出污染代码，对业务代码有一定质量要求，成本高后期维护无需特别注意，不关注各个团队的代码质量，成本低

13. 3.4 技术解决方案-多维度隔离构建时环境运行时代码沙盒 Storage namespace 业务框架隔离逻辑实现了多个维度的隔离，避免各个团队代码相互之间的影响渠道模块

14. 3.5 技术解决方案-导入文件导入遵循的一般规范：{{模块类型}}://{{模块名}}/{{导出名}} 导入组件导入utils 路由跳转导入wxs 导入样式导入wxml资源这是个例外�

15. 3.6 技术解决方案-团队协作支持以 npm、git等形式引入外部模块开发阶段自动检测外部模块更新，减少团队间沟通次数团队代码相互独立，互不影响专注本团队业务开发

16. 3.7 技术解决方案-动态构建通过不同模块的组合，可以实现小程序产品层面上的融合，更细化的支持上层业务的小程序发布需求。

17. 3.7 技术解决方案-多渠道

18. 3.7 技术解决方案-多渠道多平台条件编译代码复用减少了开发者的适配工作，达到了约86% 代码复用率，70%效率的提升，提升了工作效率。针对特定平台的无法抹平的差异，提供了条件编译功能，可以实现不同平台使用不同的代码逻辑的能力。目前支持转换到包括微信在内的6个平台的小程序

19. 3.7 技术解决方案-多渠道转换结果对比统一功能样式不统一性能微信支付宝空间交互

20. 3.8 技术解决方案-更多特性为了进一步提高开发效率和使用体验，泰坦框架还提供了很多特性：虚拟tabBar 无限路由模拟半屏组件 npm包合并注入全局组件专用API 异步上下文性能检测

21. 3.9 技术解决方案-虚拟TabBar 接近原生的体验，更强的功能

22. 3.10 技术解决方案-模拟半屏在直播间快速体验下单流程，完成交易闭环功能样式性能代码复用交互 Webview打开商详模拟半屏打开商详

23. 3.11 技术解决方案-无限路由绕过小程序页面栈10层数量限制业务无感，无需关心当前页面栈数量，无需修改代码。

24. 04. 落地成果和规划 Achievements and Plans

25. 4.1 工作成果展示泰坦框架的落地应用，在微盟项目中获得了不少成果： 100万+ 70% 效率提升商户小程序 30000+ 发布 200+ 产品 30+ 业务模块包 80% 代码复用 6 渠道建设

26. 4.2 未来规划继续推进框架的发展，进一步提升小程序的开发效率和易用性新特性多端推进H5同构，实现小程序在H5端的跨平台开发和运行多渠道支持更强大的框架兼容性和渠道多样性支持skyline、接口和身份的Mock、插件和小程序的转换生态推进生态共建，支持插件式开发开源计划开源，协同推进提升框架的能力

27. THANK YOU 谢谢你的观看李志华 – 小程序融合框架负责人 2023 Weimob Technical Salon 丨 FE 关注公众号了解更多微盟技术