干货 | 把Flutter扩展到微信小程序端的探索

Google Flutter是一个非常优秀的跨端框架，不仅可以运行在Android、 iOS平台，而且可以支持Web和桌面应用。在国内小程序是非常重要的技术平台，我们也一直思考能否把Flutter扩展到小程序端？我们团队之前已经开源了Alita项目（https://github.com/areslabs/alita），Alita可以把React Native的代码转换并运行在微信小程序平台。受此启发，我们认为同样是声明式UI框架的Flutter同样可以运行在小程序平台。

所以，我们发起了flutter_mp（https://github.com/areslabs/flutter_mp）开源项目。以微信小程序为例，不过现阶段，flutter_mp项目还处于早期的实验阶段，很多功能还在探索规划中，欢迎大家在Github上随时关注我们的最新进展，或者参与项目共同探索。

原理简介

虽然还有诸多功能未完成，我们先来谈谈整个flutter_mp的实现原理。篇幅原因，下面我们将只对flutter_mp几个重要的部分进行简单说明。

先看下flutter_mp的实际效果：

Flutter版官方layout样例：

通过flutter_mp转换并运行在小程序端效果

声明式UI的处理

Flutter是声明式UI框架，声明式UI只需要向框架描述UI长什么样子而不用关心框架具体的实现细节，具体到Flutter，上层的UI描述使用底层的skia图形引擎处理就是原生Flutter，而把底层处理换成html/css/canvas就是flutter_web，flutter_mp则是探索在类小程序上对这些UI描述的处理。

我们看一个最简单例子

var x = 'Hello World'

Center(
     child: Text(x)
);

对于上面的UI结构，我们只需要在小程序的wxml文件里，用如下的结构对应就OK了。

// wxml部分

   {{x}}


// js 部分
Component({
   data: {
       x: 'Hello World'
   }
}) 

虽然实际的结构要比上面的情况复杂的多，不过通过上面简单的例子，我们知道起码要做两个事情：

我们需要根据Flutter代码生成相关小程序wxml模版文件 收集wxml渲染需要的数据，放置到小程序组件的data字段。

wxml结构生成

我们知道小程序是无法动态操作节点的，wxml结构需要预先生成，所以Flutter运行在小程序之前，会存在一个编译打包阶段，这个阶段会遍历Dart代码， 根据一定规则生成wxml文件（编译阶段还会做下文将要提到的另外一个重要事情 — 把Dart编译为js）。

具体的，我们首先会将Dart源码处理为可分析的AST结构，AST是源代码的树型表示结构。然后我们深度遍历这份AST语法树结构，生成目标wxml，整个过程如下：

构建wxml结构的难点在于：Flutter不仅是声明式UI还是“值UI”，什么叫“值UI”？简单来说，Flutter把UI看成是一个普通的值，类似于字符串，数字一样的值，既然是一个普通的值，就可以参与所有的控制流程，可以是函数的返回值也可以是函数参数等等。而小程序的wxml虽然也是声明式UI，却不是“值UI”，wxml更加像模版，更加的静态。怎么用静态的wxml表达动态的“值UI”是构建wxml结构的关键所在。

看个例子

Widget getX() {
    if (condition1) {
        return Text('Hello');
    } else if (condition2) {
        return Container(
            child: ...
        );
    } else if (condition3) {
        return Center(
            child: ...
        );
    }
    ...
}

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

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