企业微信跨平台开发架构与实践

1. 企业微信跨平台开发实践文孝木 WXG/企业微信产品部

2.

3. 工作经历 2008 年加入腾讯，先后参与和主导了手机QQ、QQ通讯录、微信电话本、企业微信等大型手机软件的研发，涉及几乎所有主流移动端平台。2016 年开始加入企业微信团队，从零开始搭建企业微信终端框架，目前负责企微 Android 端的业务及终端跨平台 UI 架构建设工作。 2008 手机QQ 2011 QQ通讯录 C 语言版本开发 Symbian 版本开发 MTK 系统内置开发负责 iOS 端开发 2014 微信电话本负责 Android 端研发 2016 企业微信负责 Android 端研发负责终端 UI 跨平台架构

4. 背景业务场景 –TO B 业务根据行业、角色属性不同，会有不同的需求场景和表现团队规模 -- 对团队规模扩张保持克制小团队VS 需求风暴 -- 尽可能的跨平台逻辑复用 & UI复用 4

5. 大纲 • 企业微信跨平台方案整体架构 • 基于 C++ 的逻辑层跨端开发实践 • 基于 Flutter 的移动端 UI 跨平台实践 • 基于 Kotlin Multi 跨端自定义 View 实践 5

6. 1 跨平台方案架构 6

7. 1 跨平台方案架构目标 • 提升研发效率 -- 四端快速迭代、同步发布版本 • 提升业务体验 -- 保持逻辑、交互一致性 • 统一开发技术栈 -- 人力资源复用、避免瓶颈企业微信一直在探索跨平台开发的最佳实践模式 7

8. 1 跨平台方案架构三级跨平台方案，从业务逻辑到UI交互都支持跨平台复用第一级：C++ 开发业务逻辑，跨 4 端复用（性能好、组件丰富、工具链成熟）第二级：Flutter 开发业务 UI 交互跨移动端复用（极高的开发效率和开发体验、跨端能力、UI表现力强）第三级：搭建自定义、View 级别、跨 4 端复用 UI 框架，用于动态化 UI 场景（轻量、动态、跨4端）

9. 2 基于 C++ 的逻辑层跨平台 9

10. 2 基于 C++ 的逻辑层跨平台方案选择使用 C++ 进行逻辑层完全跨平台（数据拉取、数据存储、数据缓存和组织）为什么用 C++ 做逻辑层跨平台？ 1. 兼容性好 2. 性能好 3. 开发效率高、轮子多 4. 成熟的工具链 10

11. 2 基于 C++ 的逻辑层跨平台简洁的架构模式 App 1. 数据完全隔离 2. 切换帐号逻辑层全析构 3. 层级关系清晰、简单 4. Profile’ profile service manager 业务模块扩展方便 <service> msg <service> contact network <service> customer <service> …. databas e 11

12. 2 基于 C++ 的逻辑层跨平台线程模型 1. 主线程使用消息循环 2. 耗时操作外部线程 Other Thread Main Thread (message loop) 3. 线程间通过消息队列通信 4. 主逻辑无锁化 task task task task task … NetWor k Thread DataBa se Thread

13. 2 基于 C++ 的逻辑层跨平台跨平台数据 iOS\Mac\Win天然支持 C++ Android 变量&对象互相不兼容 13

14. 2 基于 C++ 的逻辑层跨平台 Java 对象关联 scoped_refptr<T>* pointer = new scoped_refptr<T>(native); 全局一份数据实例 jobject obj = envw.NewObject(javaClassSig, "(J)V", (jlong)pointer); Java 对象持有 native 对象的单向引用 Java 对象被回收时，自动解除引用接口间传递数据引用数据和方法调用，通过这个单向引用 Java C++ Java handle scoped_refpt r* Java handle scoped_refpt r* C++ Data DB 14

15. 2 基于 C++ 的逻辑层跨平台数据变化通知观察者模型响应数据变更为对象建立观察者队列跨平台只有一个 observer 实例 observer 使用弱引用 15

16. 2 基于 C++ 的逻辑层跨平台一些注意点传递对象引用、必要时再取数据注意 JNI 传递大数据的性能，大批量数据分页处理缓存 Jclass、JmethodID、JfieldID 注意 reference 的容量限制，防止泄漏&及时释放 16

17. 3 基于 Flutter 跨移动端实践 17

18. 3 基于 Flutter 跨移动端实践混合栈开发方案-单页面方案单页面管理，全部使用原生导航修改引擎，实现 Flutter Engine 全局单例 TRouter | Flutterboost方案 1

19. 3 基于 Flutter 跨移动端实践混合栈开发方案+多页面方案多页面管理，原生导航和 Flutter Navigator 混用企业微信方案 1

20. 3 基于 Flutter 跨移动端实践混合栈开发方案+多页面方案内部直接导航不用为每个页面加原生容器，内存开销小、性能好 2

21. 3 基于 Flutter 跨移动端实践混合栈开发方案+多页面方案主引擎单例+多个临时引擎，平衡内存和性能 2

22. 3 基于 Flutter 跨移动端实践 Flutter 与 Platform 通信 Channel 通信模式约定接口定义，接口一致性、可维护性差参数数据类型不安全、通信容错率低复杂对象序列化、反序列化繁琐 Channel 接口调用前预先集中注册 2

23. 3 基于 Flutter 跨移动端实践 Flutter 与 Platform 通信 Pigeon 统一生成双端接口，维护协议文件扩展 Pigeon 工具，复杂对象传递转 PB 结构设计 Channel 被动注册流程，按需注册 2

24. 3 基于 Flutter 跨移动端实践 Flutter 与 C++ 通信通过 Channel 中转调用、接口开销大官方推荐 dart:ffi，性能高接口定义复杂，学习成本高数据块裸指针传递、内存管理复杂接口调用需要切换线程、线程安全问题严重 2

25. 3 基于 Flutter 跨移动端实践 Flutter 与 C++ 通信利用 dart:ffi 通道，构建一套 RPC 通信模型 RPC 生成 Dart & C++接口, 数据通过 PB 传递隐藏内存管理和线程切换细节 service GovernRpcService { //获取我的上报列表 rpc GetGovernMyReportListFromServer(GetGovernMyReportListReq) returns (GetGovernMyReportListResp) {} } final GovernRpcServiceApi api = GovernRpcServiceApi(WeRpcClient()); final RpcResult<GetGovernMyReportListResp> result = await api.getGovernMyReportListFromServer(GetGovernMyReportListReq()..limit = 10); 接口使用和本地异步接口方式完全一致 2

26. 3 基于 Flutter 跨移动端实践开发工具完善开发效率工具 1. 界面信息、控件信息展示 2. 控件距离、位置信息查看工具 3. 图片检查、颜色吸管工具 2

27. 3 基于 Flutter 跨移动端实践开发工具完善性能监测工具 1. 页面层级分析、页面加载耗时展示 2. fps 柱状图展示 3. 内存详情以及泄漏检查 4. 方法调用记录、耗时排行 2

28. 3 基于 Flutter 跨移动端实践移动端Flutter开发业务占比达 50%（按版本新增界 Google IO 大会介绍面计算）、比例逐步提升 Mac 已接入、并有业务场景上线 2

29. 4 基于 Kotlin Multi 跨 4 端自定义 View 29

30. 4 跨 4 端自定义 View 不发版本、支持升级运营消息和运营界面 UI 交互动态性 – Native UI 展示动态化，不用跟终端版本发布跨四端 - 交互四端一致，高效复用提升开发效率嵌套使用 - 在历史消息流或 Native 功能中，与历史界面融合性能高 - 渲染性达到 Native 级别 30

31. 4 跨 4 端自定义 View 轻量易用、适应性强 31

32. 4 跨 4 端自定义 View 模版动态下发能力本地模版编辑、打包后台下发模版+数据 Xml文件 Json描述更多支持 Web 端/本地 IDE 模板文件打包工具模板文件后台 Server 数据终端 32

33. 4 跨 4 端自定义 View 模版动态下发能力终端加载、解析、渲染文件加载解析渲染文件下载模板解析视图测量文件缓存数据计算视图布局资源解包数据绑定视图绘制 33

34. 4 跨 4 端自定义 View 数据绑定动态化一份模版+多分 Data，提升模版复用效率设计 DataBinding 描述，解决 Data 数据结构差异 34

35. 4 跨 4 端自定义 View 数据绑定动态化数据驱动 UI 展示 35

36. 4 跨 4 端自定义 View 数据绑定动态化通过内置多种表达式计算，解析数据，实现数据动态驱动 UI 展示表达式计算接口化化设计，支持动态扩展 36

37. 4 跨 4 端自定义 View 数据绑定动态化模版与数据分离，数据可以独立更新动作响应更新+通知刷新 37

38. 4 跨 4 端自定义 View 支持四端跨平台 38

39. 4 跨 4 端自定义 View 遇到的问题多端内存回收算法不一致、调用规范约束 Android 端：根可达性算法，支持回收循环引用对象 iOS/Mac 端：引用计数算法，不支持回收循环引用对象性能问题优化解析算法、优化流程、模版缓存、表达式中间结果缓存 39

40. 4 跨 4 端自定义 View 成果 1. 不发版本、支持UI交互更新运营能力极大提升 2. 四端复用，跨团队沟通成本降低，开发效率 3. 机器人消息、应用消息全面模版化 4. 简单模版 JSON 化、产品运营也能自主编辑 40

41. 挑战和发展 Flutter 体验优化，动画效果等无限接近 Native Flutter 平台扩展，达到四端可用 Win 平台上扩展、验证 32 位系统实现 Flutter 增强动态能力，扩充使用场景自定义 View 扩展表达式能力、扩展控件库。开源没有最好的方案，只有适合团队的方案 4

42.

43.