MXFlutter0.2.5支援直接編譯FlutterUI為可執行的JS程式碼

SoapY發表於2020-05-18
Flutter編譯UIJS

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還不能直接執行，需要手動修改。

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

MXFlutter0.2.5支援直接編譯FlutterUI為可執行的JS程式碼

mxjsbuilder 介紹

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

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

  • 簡化 dartdevc 編譯的JS的程式碼尺寸

MXFlutter0.2.5支援直接編譯FlutterUI為可執行的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 程式碼的工作量。歡迎報告問題和提建議。

相關文章