MXFlutter0.2.5支持直接編譯FlutterUI爲可運行的JS代碼

MXFlutter v0.2.5 發佈配套 mxjsbuilder v0.0.2 編譯器,支持編譯 Flutter 工程爲 mxflutter 可運行的 JS 代碼。 體驗包下載地址 MXFlutter_v0-2-5.apk

MXFlutter 主要目標是： 支持業務由 Dart 開發，使用mxjsbuilder編譯爲JS直接運行，實現同一套 Dart 代碼同時支持 AOT 編譯爲 Native ，也能夠編譯爲JS支持動態化，因此 mxjsbuilder 編譯器是接下來最重要的工做。

mxjsbuilder 要徹底實現，工做量很是大，因爲比較多小夥伴反饋直接用JS開發，IDE沒有代碼提示，開發過程很是痛苦，因此先提早放出由 dart 提供的 dartdevc 編譯器簡單改造的 mxjsbuilder ，以供動手能力比較強的小夥伴試用，簡化直接JS開發的難度。mxjsbuilder 能夠從github mxjsbuilder v0.0.2 獲取，因爲目前簡單打包 dartdevc，文件比較大，推薦直接下載zip包 mxjsbuilder022 zip

Demo中新增mxjsbuilder demo

Demo中增長了由 mxjsbuilder 直接編譯的幾個示例，UI頁面能夠直接編譯運行，使用了MXFlutter不支持的第三方package還不能直接運行，須要手動修改。

動圖演示 （下面圖片可能須要加載一段時間）

mxjsbuilder 介紹

因爲急於先給小夥伴提供一個可用的編譯器，mxjsbuilder 只簡單對 dartdevc 作了幾項簡單改造，後續會逐步優化甚至重寫。

• MXFlutter 主庫支持 mxjsbuilder 編譯的語法

• 簡化 dartdevc 編譯的JS的代碼尺寸

mxjsbuilder 使用指南

編譯Flutter工程，生成JS代碼

示例1:運行 mxjsbuilder ，傳入工程目錄的地址

#進入mxjsbuilder目錄
cd mxjsbuilder/

#執行 mxjsbuilder ，編譯 flutter_app 工程
./mxjsbuilder /Users/mxflutter/flutter_app
複製代碼

示例2: 在要編譯的 Flutter 工程根目錄運行mxjsbuilder

#進入要編譯的 Flutter 工程跟目錄
cd /Users/mxflutter/flutter_app/

#執行 mxjsbuilder ，編譯 flutter_app 工程
/Users/mxflutter_tools/mxjsbuilder 
複製代碼

生成的 JS 文件在對應工程 flutter_app 的 /Users/mxflutter/flutter_app/mxflutter_js_build 目錄下

推薦將 mxjsbuilder 所在路徑加入環境變量，在工程根目錄運行 mxjsbuilder

引入JS代碼

參照 github github.com/mxflutter/m… 中引入mxjsbuilder_demo github.com/mxflutter/m… 的代碼

let flutter_demo = require("./mxjsbuilder_demo.js");
  
Navigator.push(context, new MaterialPageRoute({
    builder: function (context) {
        return new flutter_demo.main.MyHomePage.new({ title: "Flutter Demo Home Page" });
    }
}))

複製代碼

更復雜的示例參照 github.com/mxflutter/m…

建議

mxjsbuilder 處於預覽版，還在完善當中，推薦動手能力強的小夥伴在單獨的頁面來試用，拷貝編譯好的 JS 頁面到 mxflutter 運行，以簡化直接寫 JS 代碼的工做量。歡迎報告問題和提建議。