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

MXFlutter v0.2.5 发布配套 mxjsbuilder v0.0.2 编译器,支持编译 Flutter 工程为 mxflutter 可运行的 JS 代码。体验包下载地址 MXFlutter_v0-2-5.apkgit

MXFlutter 主要目标是： 支持业务由 Dart 开发，使用mxjsbuilder编译为JS直接运行，实现同一套 Dart 代码同时支持 AOT 编译为 Native ，也能够编译为JS支持动态化，因此 mxjsbuilder 编译器是接下来最重要的工做。github

mxjsbuilder 要彻底实现，工做量很是大，因为比较多小伙伴反馈直接用JS开发，IDE没有代码提示，开发过程很是痛苦，因此先提早放出由 dart 提供的 dartdevc 编译器简单改造的 mxjsbuilder ，以供动手能力比较强的小伙伴试用，简化直接JS开发的难度。mxjsbuilder 能够从github mxjsbuilder v0.0.2 获取，因为目前简单打包 dartdevc，文件比较大，推荐直接下载zip包 mxjsbuilder022 zipbash

Demo中新增mxjsbuilder demo

Demo中增长了由 mxjsbuilder 直接编译的几个示例，UI页面能够直接编译运行，使用了MXFlutter不支持的第三方package还不能直接运行，须要手动修改。markdown

动图演示（下面图片可能须要加载一段时间）app

mxjsbuilder 介绍

因为急于先给小伙伴提供一个可用的编译器，mxjsbuilder 只简单对 dartdevc 作了几项简单改造，后续会逐步优化甚至重写。oop

MXFlutter 主库支持 mxjsbuilder 编译的语法优化
简化 dartdevc 编译的JS的代码尺寸ui

mxjsbuilder 使用指南

编译Flutter工程，生成JS代码

示例1:运行 mxjsbuilder ，传入工程目录的地址spa

#进入mxjsbuilder目录
cd mxjsbuilder/

#执行 mxjsbuilder ，编译 flutter_app 工程
./mxjsbuilder /Users/mxflutter/flutter_app
复制代码

示例2: 在要编译的 Flutter 工程根目录运行mxjsbuildercode

#进入要编译的 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 代码的工做量。欢迎报告问题和提建议。