tencent / mxflutter Goto Github PK

使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。

License: Other

CMake 0.04% C 0.11% C++ 0.25% Java 13.18% Kotlin 0.79% Ruby 0.07% Swift 0.01% Objective-C 2.89% Dart 82.42% TypeScript 0.05% HTML 0.03% Objective-C++ 0.15%

flutter typescript dart

mxflutter's Introduction

MXFlutter Beta v0.9.0

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。

框架支持两种开发方式

基于 mxflutter-js 前端框架，使用 TypeScript 语言，以类似 Flutter 的 Widget 组装方式开发UI，借助前端生态的基础能力，开发App。（前端框架已开源: github:mxflutter-js）
不改变现有 Flutter 的开发方式，使用 MXJSCompiler 把现有工程编译为JS，运行在 mxflutter 框架之上。（ MXJSCompiler JS编译工具在开源计划中）

可以安装 Android的包来体验 MXFlutter_v0-9-0.apk。

接入的详细步骤，请参阅 mxflutter 接入指南

版本对应关系

v0.9.0	Flutter 1.22.3
v0.8.0	Flutter 1.20.3

代码库	简介	地址
mxflutter	Flutter Plugin ，使用JS Bundle 渲染页面	https://github.com/tencent/mxflutter.git
mxflutter-js	TS 前端框架，支撑使用Flutter Widget 组装方式开发UI	https://github.com/mxflutter/mxflutter-js
mxflutter_pkg	mxflutter 第三方Package支持的示例	https://github.com/mxflutter/mxflutter_pkg
awesome_mxflutter	Flutter 示例工程，演示如何运行JS Bundle	https://github.com/mxflutter/awesome_mxflutter
mxflutter-js-demo	JS 示例工程，演示如何使用TS开发Flutter	https://github.com/mxflutter/mxflutter-js-demo
mx_mirror_builder	辅助工具，用于生成 TS 类定义和 Mirror 映射	https://github.com/mxflutter/mx_mirror_builder

一、介绍

MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。

MXFlutter 在前端方向目前已经实现了使用 TypeScript 来编写，使用 Flutter Widget 的描述方式来开发业务。可以接入前端 npm 生态，并提供和 Flutter 原生十分接近的编码方式和语法提示等。MXFlutter 前端方向的未来规划是，实现 web前端 dom + css 的开发方式来接入 Flutter，通过 Vue / React 等前端熟悉的开发框架来编写业务代码，自动转换为 Flutter Widget 进行渲染，实现前端开发者的零成本接入。

MXFlutter 在终端方向的思路使用 MXJSCompiler 把现有 Flutter 工程编译为JS，运行在 MXFlutter 框架之上。以 ReactNative 框架为参照， JS引擎的性能可以支撑大型App的运行。MXJSCompiler 编译工具目前在建设中，会在后续版本稳定之后开源。

二、应用

三、特性

支持 TypeScript 语言和前端生态
支持 Flutter 中同名 Widget 类，相同API，已提供部分开发示例
支持 Flutter 相同的 Build 方式，setState刷新及事件响应方法
支持 JS 和 Dart 双向调用通道
支持模拟器页面hot reload
支持 Safari 和 Chrome 调试
支持编译现有Flutter工程为JS，运行在框架之上

四、设计思路

把 Flutter 的渲染逻辑中的三棵树（即：WidgetTree、Element、RenderObject ）中的第一棵（即：WidgetTree），放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，实现了轻量的响应式 UI 框架，支撑JS WidgetTree 的 build 逻辑，build 过程生成的UI描述，通过Flutter 层的 UI 引擎转换成真正的 Flutter 控件显示出来。

五、架构

六、如何使用

MXFlutter使用

从0.7.0版本开始，MXFlutter 最大的变化是开发语言切换到了 TypeScript，接入了npm生态，相比原来裸写JS的开发方式，向前端生态靠拢。这样就解决了之前版本最痛的没有代码提示和静态检查的问题。

MXFlutter 框架分为两部分，上层是 TypeScript 开发的 MXFlutter 前端框架，用于支撑使用TS来开发App，底层是Flutter开发的 MXFlutter Flutter Plugin，用于UI渲染。

接入三部曲：

第一步在你的 Flutter 工程里引入 mxflutter flutter plugin。
第二步用 mxflutter cli 工具新建一个 TypeScript 的 mxflutter 工程。开发完成之后编译输出JS Bundle文件。
第三步把 TS 工程编译的bundle-xxx.js 放置在你的Flutter工程制定目录下，然后就可以调用 mxflutter 提供的接口打开 TS 页面了。

接入的详细步骤，请参阅 mxflutter 接入指南

接入示例工程1 示例工程

接入示例工程2 awesome-mxflutter

七、许可协议

MXFlutter遵循BSD开源许可证协议。

八、参与贡献

MXFlutter还需要很多工作去完善功能，修改BUG，建设配套设施，如果大家有兴趣，欢迎加入一起开发。如果你有好的想法或建议，也欢迎给我们提 Issues 或 Pull Requests。

九、联系我们

MXFlutter Team 是一个技术氛围浓厚，有美女有帅哥有趣有爱的团队，欢迎终端，后台，前端同学投递简历哦：[email protected]

对MXFlutter有兴趣的小伙伴，可以加群交流 QQ群:747535761

mxflutter's People

Contributors

Stargazers

Watchers

mxflutter's Issues

建议加上热更和热修复

引入ts开发把代码逻辑这块做到了热更和热修复。
那UI那块有打算支持热更么？类似unity的ugui，可以打包成ab包，加上ts开发，目前是做到了热更和热修复。

【咨询】demo无法运行，报错，请问这个有什么解决方案吗？

../lib/src/widgets/src/packages/flutter/src/widgets/app.dart:140:5: Error: 'RouterDelegate' isn't a type.
RouterDelegate routerDelegate,
^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/app.dart:141:5: Error: 'BackButtonDispatcher' isn't a type.
BackButtonDispatcher backButtonDispatcher,
^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/app.dart:161:20: Error: Method not found: 'WidgetsApp.router'.
}) => WidgetsApp.router(
^^^^^^
../lib/src/widgets/src/packages/mx_dart_sdk.dart:2712:26: Error: Getter not found: 'vsyncStart'.
return FramePhase.vsyncStart;
^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/cupertino/activity_indicator.dart:67:15: Error: Getter not found: 'CupertinoActivityIndicatorIOSVersionStyle'.
return CupertinoActivityIndicatorIOSVersionStyle.iOS13;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/cupertino/activity_indicator.dart:69:15: Error: Getter not found: 'CupertinoActivityIndicatorIOSVersionStyle'.
return CupertinoActivityIndicatorIOSVersionStyle.iOS14;
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/rendering/mouse_tracking.dart:50:22: Error: The argument type 'LinkedHashMap<MouseTrackerAnnotation, Matrix4>' can't be assigned to the parameter type 'LinkedHashSet'.

'LinkedHashMap' is from 'dart:collection'.
'MouseTrackerAnnotation' is from 'package:flutter/src/rendering/mouse_tracking.dart' ('/D:/flutter-1.20.3/flutter/packages/flutter/lib/src/rendering/mouse_tracking.dart').
'Matrix4' is from 'package:vector_math/vector_math_64.dart' ('/D:/flutter-1.20.3/flutter/.pub-cache/hosted/pub.flutter-io.cn/vector_math-2.0.8/lib/vector_math_64.dart').
'LinkedHashSet' is from 'dart:collection'.
lastAnnotations: lastAnnotations,
^
../lib/src/widgets/src/packages/flutter/src/rendering/mouse_tracking.dart:51:22: Error: The argument type 'LinkedHashMap<MouseTrackerAnnotation, Matrix4>' can't be assigned to the parameter type 'LinkedHashSet'.
'LinkedHashMap' is from 'dart:collection'.
'MouseTrackerAnnotation' is from 'package:flutter/src/rendering/mouse_tracking.dart' ('/D:/flutter-1.20.3/flutter/packages/flutter/lib/src/rendering/mouse_tracking.dart').
'Matrix4' is from 'package:vector_math/vector_math_64.dart' ('/D:/flutter-1.20.3/flutter/.pub-cache/hosted/pub.flutter-io.cn/vector_math-2.0.8/lib/vector_math_64.dart').
'LinkedHashSet' is from 'dart:collection'.
nextAnnotations: nextAnnotations,
^
../lib/src/widgets/src/packages/flutter/src/rendering/mouse_tracking.dart:68:22: Error: The argument type 'LinkedHashMap<MouseTrackerAnnotation, Matrix4>' can't be assigned to the parameter type 'LinkedHashSet'.
'LinkedHashMap' is from 'dart:collection'.
'MouseTrackerAnnotation' is from 'package:flutter/src/rendering/mouse_tracking.dart' ('/D:/flutter-1.20.3/flutter/packages/flutter/lib/src/rendering/mouse_tracking.dart').
'Matrix4' is from 'package:vector_math/vector_math_64.dart' ('/D:/flutter-1.20.3/flutter/.pub-cache/hosted/pub.flutter-io.cn/vector_math-2.0.8/lib/vector_math_64.dart').
'LinkedHashSet' is from 'dart:collection'.
lastAnnotations: lastAnnotations,
^
../lib/src/widgets/src/packages/flutter/src/rendering/mouse_tracking.dart:69:22: Error: The argument type 'LinkedHashMap<MouseTrackerAnnotation, Matrix4>' can't be assigned to the parameter type 'LinkedHashSet'.
'LinkedHashMap' is from 'dart:collection'.
'MouseTrackerAnnotation' is from 'package:flutter/src/rendering/mouse_tracking.dart' ('/D:/flutter-1.20.3/flutter/packages/flutter/lib/src/rendering/mouse_tracking.dart').
'Matrix4' is from 'package:vector_math/vector_math_64.dart' ('/D:/flutter-1.20.3/flutter/.pub-cache/hosted/pub.flutter-io.cn/vector_math-2.0.8/lib/vector_math_64.dart').
'LinkedHashSet' is from 'dart:collection'.
nextAnnotations: nextAnnotations,
^
../lib/src/widgets/src/packages/flutter/src/services/system_sound.dart:26:31: Error: Getter not found: 'alert'.
return SystemSoundType.alert;
^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/overflow_bar.dart:61:15: Error: Getter not found: 'OverflowBarAlignment'.
return OverflowBarAlignment.start;
^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/overflow_bar.dart:63:15: Error: Getter not found: 'OverflowBarAlignment'.
return OverflowBarAlignment.end;
^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/overflow_bar.dart:65:15: Error: Getter not found: 'OverflowBarAlignment'.
return OverflowBarAlignment.center;
^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/form.dart:85:15: Error: Getter not found: 'AutovalidateMode'.
return AutovalidateMode.disabled;
^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/form.dart:87:15: Error: Getter not found: 'AutovalidateMode'.
return AutovalidateMode.always;
^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/form.dart:89:15: Error: Getter not found: 'AutovalidateMode'.
return AutovalidateMode.onUserInteraction;
^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/autofill.dart:42:15: Error: Getter not found: 'AutofillContextAction'.
return AutofillContextAction.commit;
^^^^^^^^^^^^^^^^^^^^^
../lib/src/widgets/src/packages/flutter/src/widgets/autofill.dart:44:15: Error: Getter not found: 'AutofillContextAction'.
return AutofillContextAction.cancel;
^^^^^^^^^^^^^^^^^^^^^

FAILURE: Build failed with an exception.

Where:
Script 'D:\flutter-1.20.3\flutter\packages\flutter_tools\gradle\flutter.gradle' line: 896
What went wrong:
Execution failed for task ':app:compileFlutterBuildDebug'.

Process 'command 'D:\flutter-1.20.3\flutter\bin\flutter.bat'' finished with non-zero exit value 1

Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.
Get more help at https://help.gradle.org

BUILD FAILED in 44s
Picked up _JAVA_OPTIONS: -Djava.net.preferIpv4Stack=true

架构那个图不完整

架构部分示意图不完整

【bug】windows下路径问题

/D:/flutter-1.20.3/flutter/.pub-cache/git/mxflutter-16f9aa991576885be693734e7e95b5a5516aa4cd/lib/src/widgets/src/packages/flutter/src/widgets/restoration_properties.dart:11:8: Error: Error when reading '/D:/flutter-1.20.3/flutter/packages/flutter/lib/src/widgets/restoration.dart': 系统找不到指定的文件�?
编译的时候遇到过目录无法找到的问题，看了一下路径下是有文件的，只是 D盘下面多了个 /D 导致无法找到，这种可以做适配吗？

tencent / mxflutter Goto Github PK

mxflutter's Introduction

MXFlutter Beta v0.9.0

版本对应关系

相关代码库

MXFlutter使用

mxflutter's People

Contributors

Stargazers

Watchers

Forkers

mxflutter's Issues

Recommend Projects

Recommend Topics

Recommend Org