小程序遇上 Flutter 3.0

Flutter 是一个非常优秀的开发框架，借助 Flutter，开发者可以在 iOS 以及 Android 平台自由地发挥创意，构建交互丰富的、精美的应用程序。

Flutter 产品团队透露，创建 Flutter 的初衷是试图彻底改变应用开发：将网络的迭代开发模式与硬件加速图形渲染和像素级控制相结合，而这在以前是游戏的专利。自 Flutter 1.0 测试版以来的四年里，逐渐在这些基础上发展，增加了新的框架功能和新的小工具，与底层平台更深入的整合，丰富的包库和许多性能和工具的改进。

Flutter 3.0 更新内容

在 2022 年谷歌开发大会上，作为 I/O 主题演讲的一部分，主创团队正式推出 Flutter 3.0。总的来说 Flutter 3.0 完成了从以移动为中心到多平台框架的路线图，提供了对 macOS 和 Linux 桌面应用的支持，以及对 Firebase 集成的改进，新的生产力和性能特性，并支持 Apple Silicon。

具体来看，Flutter 3.0 增加了对 macOS 和 Linux 应用的稳定支持。增加平台支持需要的不仅仅是渲染像素：它包括新的输入和交互模型、编译和构建支持、可访问性和国际化，以及特定平台的整合。目标是让大家能够灵活地充分利用底层操作系统，同时尽可能多地分享开发者选择的用户界面和逻辑。

在 macOS 上，已经支持英特尔和苹果 Silicon，并提供通用二进制支持，使应用程序能够打包可执行文件，在两种架构上原生运行。在 Linux 上，Canonical 和谷歌已经合作为开发提供了一个高度集成的、最好的选择。

Flutter 3 还对许多基本要素进行了改进，提高了性能，支持 Material You，并更新了生产力。

Flutter 应用情况

随着 Flutter 开发框架的不断成熟，越来越多的人开始用它构建应用程序。截止目前，有超过 50 万个应用程序是用 Flutter 建立的。来自data.ai等研究公司的分析，以及公众的评价，表明 Flutter 被许多细分领域的客户所使用：从微信等社交应用到 Betterment 和 Nubank 等金融和银行应用；从 SHEIN 和trip.com等商务应用到 Fastic 和 Tabcorp 等生活方式应用；从 My BMW 等伴侣应用到巴西政府等公共机构。

同时在 Flutter 3.0 发布会上，研发团队发布了基于开发者的调研数据：

• 91% 的开发者认为 Flutter 缩短了构建和发布应用程序的时间。

• 85%的开发者认为 Flutter 使他们的应用程序比以前更漂亮。

• 85%的人认为 Flutter 使他们的应用比以前能在更多的平台上发布。

Flutter 与小程序

小程序作为我国技术研发届的一个独特产物，由于其轻量、便捷、优质的体验在近些年得到迅速的发展，特别是在腾讯、阿里、百度、字节等各家大厂的小程序开发平台助推下，其中仅微信小程序的数量就超过 700 万，小程序开发者数量 300-400 万人，规模相当惊人。

小程序与 Flutter 最密切关联还是在渲染优化上，先来看看整个框架：

在这个架构下，我们就将 Layout 层的 LV-CPP 专门的作为小程序的 UI 体系处理器，将 UI 信息布局计算好再提交给抽象的后端去渲染，LV-CPP 作为小程序的框架和渲染器的中间层，集中的在 C++ 层去处理与 Web 相关的复杂特性。渲染端就可以基于特定的协议和接口专注将元素转化为 UI 组件，最终绘制出来。

通过结合 Flutter 和 LV-CPP，我们把实现代码收敛在 C++ 和 Dart 上，进一步简化了基于小程序技术栈实现跨平台业务开发的框架维护成本。

再来看看各家厂商是如何开展的：

京东：把 Flutter 扩展到微信小程序端的探索

京东发起了 Flutter_mp 的开源项目，此框架主要做到两件事情：1.需要根据 Flutter 生成相关的小程序 wxml 模板文件。2.收集 wxml 渲染需要的数据，放置到小程序组件的 data 字段。flutter_mp 还处于早期的实验阶段，很多功能还在探索规划中，只支持 Center，Column，Container，Expanded，Image.asset，ListView，Row，Text 这些基本 Widget，暂不支持 自定义 Widget，而且自己的 Flutter 代码只能够出现在 lib/main.dart 文件中。

美团：基于跨平台框架 Flutter 的动态化平台建设

微信和咸鱼都强调 Flutter 的跨平台，而美团则强调了 Flutter 的动态化，而我们知道，Flutter 不支持线上的动态化，所以美团的分享主要围绕逻辑层动态化和渲染层动态化来进行。美团在动态化引擎部分预置了一个 JSC 模块，也就是 JsCore，通过 JSC 来执行 JavaScript 从而实现逻辑层的动态化，而渲染层动态化则通过 xml+css 来展示，然后解析生成布局树并最终通过 Flutter 来渲染。

微信：基于小程序技术栈的微信客户端跨平台实践

微信小程序，最开始是采用 Webview 渲染的方案，后面又采用了 React-Native-Like 的方案，再后来微信提出了一个很大胆的想法：上层依然使用 WXML+WXSS 来表示，但是底层使用 Flutter 引擎来渲染，而且他们觉得 Platform Channel 通信效率低，自己整了一个 dart2cpp 的模块来负责通信。目前微信不会放弃 WebView 渲染，尝试仅限于微信客户端内部部分场景使用。

FinClip：基于小程序技术的跨端开发平台建设

FinClip 作为小程序容器技术，也可以说是小程序沙箱 Runtime/Engine，提供 Runtime 基于浏览器内核，采用动态语言(JS)和声明式 View 构建（XML），兼容互联网主流小程序技术，可采用 Vue、react 基础上的 DSL 框架。

实际上不与 Flutter、Reactive-Native、100% Native 或 Framework 们技术冲突，嵌入即可，个体小程序开发依然可享受 React 等 Web Framework、mate Framework、DSL Frameworke 的成果

这种小程序容器技术，将视图层与逻辑层分离也带来了许多好处：

1、方便多个小程序页面之间的数据共享和交互。在小程序的生命周期中具有相同的上下文可以为具备原生应用程序开发背景的开发人员提供熟悉的编码体验；

2、Service 和 View 的分离和并行实现可以防止 JS 执行影响或减慢页面渲染，这有助于提高渲染性能；

3、因为 JS 在 Service 层执行，所以 JS 里面操作的 DOM 将不会对 View 层产生影响，所以小程序不能操作 DOM 结构的，这也使得小程序的性能比传统的 H5 更好。