把 Flutter 扩展到微信小程序端的探索，安卓面试题库

}

...

}

Widget x = getX();

Center(

child: x // < --- 如何处理这里的 x？？

);

这里的 child: x x 是一个动态值，它的具体值需要在运行阶段才能确定，它可能是任意的 Widget，如何在静态的 wxml 上处理这里动态的 x？受 Alita 框架的启发，这里主要是借助于小程序 template 的动态性（template 的 is 属性可以接受变量值）。有如下几步：

1、首先在遍历 Dart 源码 AST 结构的时候，会把每一个独立完整的“UI 值”片段，对应到 wxml 的 template， 比如上文 getX 里面的 UI

<template name="template001">

<text>Hello</text>

</template>

<template name="template002">

<Container>...</Container>

</template>

<template name="template003">

<Center>...</Center>

</template>

2、在遇到 类似 x 这种动态值的时候，固定的会生成一个 template 占位

<template name="template004">

<Center>

<template is="{{templateName}}" data="{{...templateData}}"/>

</Center>

<template name="template003">

3、在运行阶段，会根据 getX

函数的运行结果来决定 x 映射的“UI 值”，如果 getX 里面 condition1 为 true，那么这里的 templat

《Android学习笔记总结+最新移动架构视频+大厂安卓面试真题+项目实战源码讲义》
浏览器打开：qq.cn.hn/FTe 免费领取

eName 的值就是 template001。具体的数据计算收集工作，参考下面要的 “渲染数据收集”过程。可以看出 flutter_mp 处理“值 UI”方式，完全参考了 Alita。

渲染数据收集

wxml 结构的生成是在编译阶段就完成了，与它不同渲染数据是运行时的信息，随时会根据 setState 而改变。那么我们怎么收集出我们需要的渲染数据呢？

如果我们还是顺着 Flutter 的架构图，很难插入我们收集的钩子函数，另外 Flutter 的这个架构对于小程序来说太重了，下图红框里的这些过程对于小程序的渲染来说并不必要。最后由于最终的代码会被转化为 js，而 Flutter 本身依赖的库里面很多是不支持转化 js 的，比如 dart:ui 等等。

所以我们实现了一个极简极简的 Flutter 小程序版本 mini_flutter，在编译期我们会把所有对 Flutter 库的引用替换为 mini_flutter, mini_flutter 只存在到上图的 Rendering 阶段，这个 Rendering 的实现也是为小程序定制的， 在运行时期 Rendering 不断收集 Widgets 的信息。最终生成一个 UI 描述的 JSON 结构，这个结构就包含了上文所说的 templateName， templateData，UI 描述将会被下层小程序获得，用来渲染小程序 UI，架构图如下：

Dart/JS：转化与互操作

Flutter 的开发语言是 Dart，而小程序的运行环境是浏览器，所以我们还需要把 Dart 编译为 JavaScript 代码。

在上文的编译打包阶段也提到这一点，这个过程主要是使用了 Dart 提供的 dart2js 工具，不过，针对小程序环境，生成的 js 代码仍需要做一些适配，另外虽然都是 JS 代码，dart2js 生成的 js 和小程序原生 js 的运行环境却是隔离的，也就是说它们是不能共享变量，方法等等，它们各自在本身的"域"里执行。

这带来两个问题：

1、Widget 初始化 或者 setState 更新，生成的 UI 描述 JSON，如何传递给小程序"域"呢？

2、相关渲染回调，事件的都发生在小程序"域"，这些信息如何传递给 Dart？

总结一下：Dart（最终会编译为 JS）与小程序原生 JS 如何互操作？

解决这个问题主要是借助 dart:js， package:js 这两个库：

Dart 操作 JS

import 'package:js/js.dart';

@JS("JSON.stringify")

external stringify(String str);

这样当 Dart 代码调用 stringify 方法的时候，实际上会执行 window.JSON.stringify 方法

JS 操作 Dart

// dart 注册

void main() {

context['dartHi'] = () {

print('dart hi!');

};

}

// js 调用

window.dartHi()

这里只是简单说明 Dart 与 JS 的互操作，另外由于小程序的运行环境是阉割以后的浏览器环境，flutter_mp 的实现还稍有不同。

总之，Dart 与 JS 是可以互操作的，这样就打通了上层 Flutter 环境和下层小程序环境。

布局系统

Flutter 的布局系统不同与 css，但是和 css 颇相似。

在上文提到的 Rendering 阶段，会根据 Widget 的布局属性，类别，约束条件生成一个等效的 css 样式。注意这里边界约束是上下文相关的。比如一个没有宽高的 Container 实际大小，不仅和子元素相关，还和父元素传递过来的边界约束条件相关，这个其实是比较麻烦的，能不能把 Flutter 的 Widget 属性，边界约束完全用 css 表达，我们还在寻求有效的方案。

总结

和 flutter_web 一样，完全把 Flutter 所有特性渲染到小程序上是不可能的，一般我们觉得应该是部分页面，部分功能需要运行在小程序上，这样使用 flutter_mp 才是有意义的。

正如前文所说，flutter_mp 还在很早期的阶段，如果你需要在生产环境实现小程序跨端开发，推荐使用我们成熟的 RN 转小程序项目 Alita。

学习分享，共勉

题外话，之前一直不注意对知识的整理，导致很多知识点学习不系统，正好最近同事和我花了一个多月的时间整理出来一份 Flutter 全方面的学习资料，今天把它免费分享出来，希望能够帮助到陷入移动开发困局 Android 工程师朋友，尽早跟上新兴热点技术。这份资料包括**Flutter 学习 PDF+架构视频+面试文档+项目实战（源码）也省的大家再去网上花时间找资料。[点击我](

) 前往免费领取**

**资料免费领取方式：转发+关注+点赞后，[点击我](

) 前往免费领取**