MXFlutter0.2.5支持直接编译FlutterUI为可运行的JS代码

2,569 阅读2分钟

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 代码的工作量。欢迎报告问题和提建议。