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

Google Flutter是一個很是優秀的跨端框架，不只能夠運行在Android、 iOS平臺，並且能夠支持Web和桌面應用。在國內小程序是很是重要的技術平臺，咱們也一直思考可否把Flutter擴展到小程序端？咱們團隊以前已經開源了Alita項目，Alita能夠把React Native的代碼轉換並運行在微信小程序平臺。受此啓發，咱們認爲一樣是聲明式UI框架的Flutter一樣能夠運行在小程序平臺。

因此，咱們發起了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部分
<Center>
   <Text>{{x}}</Text>
</Center>

// 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

<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，那麼這裏的templateName的值就是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。