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

声明式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看成是一个普通的值，类似于字符串，