加载失败，
在微信小程序里运行完整的 Flutter，怎么做到的？
在微信小程序里运行完整的 Flutter，怎么做到的？
1月26日修改
本文讨论了在微信小程序里运行完整 Flutter 的背景、面临的技术挑战及对应的技术方案。关键要点包括：
1.
微信小程序开发常用方法：一般使用 JavaScript + WXML + WCSS 或 Taro + React + JavaScript 开发，本文介绍用 Flutter Framework 开发的方法及原理。
2.
技术挑战：微信小程序无 W3C 标准 JavaScript 对象和 DOM 实现，且包大小限制严格，主包不能超 2M。
3.
MPFlutter 1.x 方案：用 kbone 库模拟 W3C 实现，通过 Shadow Element Tree 同步视图树，裁剪 Flutter Framework 使 main.dart.js 体积降至 600K，但存在不兼容插件等问题。
4.
MPFlutter 2.0 技术选型：选用 CanvasKit Renderer，其渲染性能好、一致性强，且微信小程序相关能力提升使其具备使用条件。
5.
Skia 裁剪：通过指定编译选项去掉不必要功能，裁剪后的 wasm 文件符合 2M 分包要求。
6.
字体加载与分包：裁剪 NotoSansSC 字体内置，解决字体加载问题；利用 Flutter Web 编译能力智能分包 JS 文件和资源。
7.
背景
小程序是一种全新的业务形态，特别是微信小程序，既结合了 Web 动态化特性，又拥有 Native 丰富的设备能力支持。
在微信这个宿主上，小程序不仅有稳定的分发渠道，更拥有完善的生命周期、数据、AI 能力支持。
在该微信上开发小程序，一般使用以下两种方法：
•
JavaScript + WXML + WCSS
•
Taro + React + JavaScript
本文要介绍的是使用 Flutter Framework 开发小程序的方法，以及该方法背后的技术原理。
技术挑战
尽管 Flutter 官方已经提供 Flutter Web 实现，Flutter Web 本身就是基于 dart2js 运行的，微信小程序可以运行 JavaScript，在原理上跑起 Flutter Web 是没有问题的。
但仍然存在以下技术挑战：
•
微信小程序没有 W3C 标准的 JavaScript 对象，Flutter Web 不能直接运行。
•
微信小程序也没有 DOM 实现，Flutter Web HTML Renderer 不能直接渲染。
•
微信小程序对包大小的限制十分严格，主包不能超过 2M，而 Flutter Web 所编译的 main.dart.js 初始体积就有 1.3 M，必须有合理的分包机制才能上传。
我们在 MPFlutter 1.x 版本中，针对上述问题已有一定的探索，1.x 版本的解决方法如下：
•
使用微信开源的 kbone 库，模拟 W3C 实现，并通过模拟的 DOM 对象渲染出符合 WXML 要求的视图树。
•
通过 Shadow Element Tree 的方式，使用 JSON 在 Dart 与 JavaScript 上下文同步视图树。
•
Fork Flutter Framework，并对其进行外科手术式的裁剪，使 main.dart.js 初始体积降低到 600K。