使用Flutter开发小程序的尝试,flutter开发小程序

本文讲述了使用Flutter开发小程序的尝试,flutter开发小程序。

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

同时，Flutter 官方也支持输出到 Web 平台。不过，就我们在实际在开发过程中的体验而言，Flutter For Web 在移动端的性能表现并不理想，尤其在 Android 中低端手机上，性能问题更为突出。并且，Flutter For Web 产物轻轻松松就超过了 2M，这不符合 Web 的体验。

为此，MPFlutter 团队在一年前就尝试是否可以采取另一种思路，在解决 Flutter For Web 的性能问题的同时，解决产物大小过大的问题。

Flutter For Web 的原理

解决问题的关键，是要深刻理解问题的根本原因，我们通过下图了解一下 Flutter For Web 的基本架构。Flutter For Web 在 Framework 层与 Flutter Native 几乎没有差异，Framework 层会接管所有动画、手势、滚动事件。而 Framework 以及 Application Logic 代码是通过 dart2js 编译成 JavaScript 的，也就是说，开发者可以使用 Dart 开发应用，然后借助 dart2js 编译成 JavaScript 运行在浏览器上。而最终负责渲染的是 Dom 或是 WebGL。

Flutter For Web 存在性能问题关键在于，JSRuntime 承载了太多职责，既要负责应用逻辑的调度，又要负责布局、手势、动画的计算，用户的每一次交互都需要 Framework 层重新计算，并更新到 Dom 或 WebGL 中。而 Dom 更新又是非常消耗性能的操作。

官方目前正在全力推进 WebGL 渲染目标开发，使用 WebGL 可以避免上述问题，但 WebGL 的兼容性不佳，并且对于文本渲染、特定 Element 元素的支持不甚理想，在中低端安卓机上，也是非常卡顿。

我们的思路

既然问题的根本原因在于 Dom 更新过程开销过大以及 JavaScript 负载过高，那是否可以换一种思路解决问题？

我们是否可以通过一次性导出当前状态的组件树，并尽可能减少 Framework 需要处理的事件，做到性能与功能的平衡呢？

答案是可以的，而且 MPFlutter 正是这么做的，经过调整后的架构如下图。

MPFlutter 会在 Flutter 每帧 Draw 以后，将 Element 树序列化成 JSON，并在对端（Web）反序列化成 Dom 对象，并添加到 document.body 上。

在 Dom 对象上发生的各种事件，如 click / touch 也会以相同的方式回传到 Framework 层，由 Framework 层响应事件并更新视图。

更进一步地，我们可以借助 Flutter Element 的 Diff 特性，差量地通过 RPC 发送 Dom 更新数据，进一步优化性能。

对包大小的优化

对于 Web 应用来说，复杂的组件，必然导致包大小的增加。为此，MPFlutter 移除了 Material 和 Cupertino 组件库，补充了 MPKit 库用于常规 UI 展示。MPFlutter 也将 Painting Rendering 暂时没有用到的代码移除。通过该项措施，初始包大小(main.dart.js)得以精简至 300K 以下。

结论

我们通过减少 Dom 的更新次数，减少 Flutter Framework 的事件处理压力，提升了 Flutter Web 应用的性能，当前成果已经通过 GitHub 开源，并应用在某应用的生产环境中。

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 Framework 的成果

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

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

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

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

FinClip 提供了Flutter SDK，支持在 Flutter 环境使用小程序；以满足 Flutter 和小程序混编的效果。

上文就是小编为大家整理的使用Flutter开发小程序的尝试,flutter开发小程序。

国内(北京、上海、广州、深圳、成都、重庆、杭州、西安、武汉、苏州、郑州、南京、天津、长沙、东莞、宁波、佛山、合肥、青岛)Finclip软件分析、比较及推荐。