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