Giter VIP home page Giter VIP logo

mxflutter's Introduction

MXFlutter Beta

公告

MXFlutter 主库的后续更新迁移到Github Tencent帐号下继续开发迭代,v0.9.0以上版本请移步 https://github.com/tencent/mxflutter ,本代码仓库停止更新。感谢各位同学的帮助!


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

框架支持两种开发方式

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

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

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

版本对应关系

*new 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's People

Contributors

294485329peng avatar ainibaba avatar chenzhengxu avatar colin3dmax avatar diordnal avatar mxflutter avatar tgif-lucaliu avatar xsoap avatar yuxizhe avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mxflutter's Issues

更新js 文件 产生这个错误

更新js 文件 产生这个错误

Error 105 received from application: Isolate must be runnable
Unhandled exception:
{code: 105, message: Isolate must be runnable, data: {request: {method: _reloadSources, params: {pause: true, rootLibUri: file:///Users/ryan/Library/Developer/CoreSimulator/Devices/DF9EE301-B1BE-4863-A915-E9531CB32C2E/data/Containers/Data/Application/588E43D2-D23D-48A3-A0A0-014F42E1F51E/tmp/MXFlutterXdUBxt/MXFlutter/lib/main.dart.incremental.dill, packagesUri: file:///Users/ryan/Library/Developer/CoreSimulator/Devices/DF9EE301-B1BE-4863-A915-E9531CB32C2E/data/Containers/Data/Application/588E43D2-D23D-48A3-A0A0-014F42E1F51E/tmp/MXFlutterXdUBxt/MXFlutter/.packages, isolateId: isolates/323409572}}, details: Isolate must be runnable before this request is made.}}
#0 _rootHandleUncaughtError. (dart:async/zone.dart:1112:29)
#1 _microtaskLoop (dart:async/schedule_microtask.dart:41:21)
#2 _startMicrotaskLoop (dart:async/schedule_microtask.dart:50:5)
#3 _runPendingImmediateCallback (dart:isolate-patch/isolate_patch.dart:115:13)
#4 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:5)

Support Typescript

  • 跟 JS 相比, 同样具有脚本语言特性, 但有更好但类型系统。
  • 或许可以利用 .d.ts 文件来帮助 mxflutter 来使用 dart 生态。

跑不起来

这个库引入了大量的第三方包,可能会不可避免的导致某些包升级的时候引发bug
XCODE:11.5
FLUTTER:1.22.6
git 引入的是v0.8.0-beta
各种测试 要么提示找不到FMDB.h
要么提示Error: Method not found: 'TransitionBuilderPage'.
反正,就半小时了,没有跑起来。
大家有没有测试通过的环境版本写到README里去啊

复杂控件刷新问题

问题场景:

  1. 自定义控件A,A内部包含自定义控件B。
  2. B由于某些触发因素(如:动画、点击等)通过js 通知 flutter端rebuild。
  3. A由于某些因素(如:ListView滚动)导致从Flutter端发起build流程。

问题现象:
此时B控件的状态没有保存住,被重置了,比如B控件显示动画之前的UI状态。

原因分析:
从源码中,感觉是因为当A build时,保存了整个控件的widgetData,当B被build时,只有B控件自身进行了更新,A中保存的widgetDdata没有更新,所以当A由于flutter端触发的build操作,使用的还是旧的widgetData,显示出来的B控件就变成旧的UI样式了。

希望状态管理这块内容在新版本能有更好的更直观的使用方式。

_canDefineDebugJSBundlePath是private的

  if (await _canDefineDebugJSBundlePath()) {
     // 在使用iOS 模拟器调试时,MXJSFlutter.runJSApp()可以设置  debugJSBundlePath 参数,推荐设置成 TS 代码的输出目录,这样TS代码实时更新生效。
     MXJSFlutter.runJSApp(debugJSBundlePath: '/Volumes/Data/Work/RFlutter/mxflutter-js/release');
  } else {
     MXJSFlutter.runJSApp();
  }

_canDefineDebugJSBundlePath是private的,业务代码无法调用。

如何实现动态下发

你好,README 中说是一个动态框架,请问这个动态是如何实现?比如怎么生成增量包等等

发现一处typo

  /// 将MaterialTapTargetSize数据转成json map。
  static Map cMaterialTapTargetSizeToJson(MaterialTapTargetSize data) {
    Map v;

    switch (data) {
      case MaterialTapTargetSize.padded:
        v = {"_name": "aterialTapTargetSize.padded", "index": 0};
        break;

      case MaterialTapTargetSize.shrinkWrap:
        v = {"_name": "MaterialTapTargetSize.shrinkWrap", "index": 1};
        break;
    }

    return v;
  }

mx_common.dart的316行,应该是MaterialTapTargetSize,不是aterialTapTargetSize吧。

pub dev version issues

mxflutter: ^0.2.5

The mxflutter Java wrapper plugin is downloaded as an old version. (com.mojitox.mxflutter)
What is the solution?

错误 undefined:174: TypeError: Cannot read property

按照步骤接入,能正常运行:
MXJSWidgetHomePage页面能push出来;
MXJSWidgetHomePage里面的列表item随便点击哪个都报错:
I/flutter (14965): MXJSFlutter:[Flutter]-callJSWidget:flutterCallOnEventCallback
D/MXJSFlutter:Native: -|[com.mojitox.mxflutter.framework.MXJSFlutterApp$3][onMethodCall][138]| -|MXJSFlutter : jsFlutterAppChannel callJS:flutterCallOnEventCallback|
D/MXJSEngine(14965): MXJSFlutter:[JS]-MXJSFlutterApp:nativeCall[object Object]
D/MXJSEngine(14965): MXJSFlutter:[JS]-JSWidget invokeCallback ::WidgetInfo: Name: undefined Class: MXJSStatefulWidget WID: 5 buildseq: 1 currentTreeSeq: 1 buildingseq: 1 preTreeSeq: 1 buildWidgetDataSeq: 1 callID: 5/21
E/MXJSExecutor(14965):
E/MXJSExecutor(14965): undefined:174: TypeError: Cannot read property 'JSPestoPage' of null
E/MXJSExecutor(14965): return new pesto.JSPestoPage;
E/MXJSExecutor(14965): ^
E/MXJSExecutor(14965): TypeError: Cannot read property 'JSPestoPage' of null
E/MXJSExecutor(14965): at MaterialPageRoute.builder (:174:50)
E/MXJSExecutor(14965): at NavigatorState.push (:1212:64)
E/MXJSExecutor(14965): at Function.push (:1246:20)
E/MXJSExecutor(14965): at onTap (:172:35)
E/MXJSExecutor(14965): at MXJSWidgetTree.invokeCallback (:483:12)
E/MXJSExecutor(14965): at MXJSWidgetHelper.invokeCallback (:856:44)
E/MXJSExecutor(14965): at MXJSWidgetHelper.onEventCallback (:756:30)
E/MXJSExecutor(14965): at MyApp.flutterCallOnEventCallback (:421:35)
E/MXJSExecutor(14965): at MyApp.nativeCall (:405:18)
E/MXJSExecutor(14965): com.eclipsesource.v8.V8ScriptExecutionException
E/MXJSExecutor(14965): at com.eclipsesource.v8.V8._executeFunction(Native Method)
E/MXJSExecutor(14965): at com.eclipsesource.v8.V8.executeFunction(V8.java:1162)
E/MXJSExecutor(14965): at com.eclipsesource.v8.V8Object.executeFunction(V8Object.java:370)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.MXJSExecutor$13.excute(MXJSExecutor.java:201)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.utils.MXJsScheduledExecutorService$MXJsTask.run(MXJsScheduledExecutorService.java:71)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.utils.MXJsScheduledExecutorService.execute(MXJsScheduledExecutorService.java:57)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.MXJSExecutor.invokeJSValue(MXJSExecutor.java:195)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.MXJSFlutterApp$3$1.excute(MXJSFlutterApp.java:148)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.utils.MXJsScheduledExecutorService$MXJsTask.run(MXJsScheduledExecutorService.java:71)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.utils.MXJsScheduledExecutorService.execute(MXJsScheduledExecutorService.java:57)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.MXJSExecutor.execute(MXJSExecutor.java:49)
E/MXJSExecutor(14965): at com.mojitox.mxflutter.framework.MXJSFlutterApp$3.onMethodCall(MXJSFlutterApp.java:144)
E/MXJSExecutor(14965): at io.flutter.plugin.common.MethodChannel$IncomingMethodCallHandler.onMessage(MethodChannel.java:226)
E/MXJSExecutor(14965): at io.flutter.embedding.engine.dart.DartMessenger.handleMessageFromDart(DartMessenger.java:85)
E/MXJSExecutor(14965): at io.flutter.embedding.engine.FlutterJNI.handlePlatformMessage(FlutterJNI.java:631)
E/MXJSExecutor(14965): at android.os.MessageQueue.nativePollOnce(Native Method)
E/MXJSExecutor(14965): at android.os.MessageQueue.next(MessageQueue.java:326)
E/MXJSExecutor(14965): at android.os.Looper.loop(Looper.java:190)
E/MXJSExecutor(14965): at android.app.ActivityThread.main(ActivityThread.java:7275)
E/MXJSExecutor(14965): at java.lang.reflect.Method.invoke(Native Method)
E/MXJSExecutor(14965): at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:497)
E/MXJSExecutor(14965): at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:908)

额,文档链接错了……

现在的链接后面少了 .md……

顺便想提一个小疑问点……

这个库是针对ios设备做的么,看像 JavasSriptCore 这个技术点是面向ios的,文档说明也没提到跨平台这块的,所以,做为一个Android程序员,自然想知道在Android这块的支持怎么样呢?

为什么限制 withSourceURL 中路径的长度?

具体问题是这一行:

jsFilePathPrefix = [jsFilePathPrefix substringFromIndex:jsFilePathPrefix.length - preixLen];

文件地址:

jsFilePathPrefix = [jsFilePathPrefix substringFromIndex:jsFilePathPrefix.length - preixLen];

如果对 JS 文件路径进行截断,会导致在真机运行时文件路径错误,iOS JavaScriptCore 执行文件内容会失败,这里这样做的考虑是什么?(想了解 230 行存在的理由)

main.js

Main.js的源代码能给出来阅读吗?

Demo 运行报错

iOS 跑主工程的example,跳转到示例页面时报错:
[ERR]::MXJSWidgetState:build: widget.widgetData == null this.widget.widgetID:3

然后页面空白,只有一个loading动画。

整个跨语言通信的链路太长了

整个通信链路太长了,dart端把JS通过methodChannel传到Java,然后在j2v8到v8中,其实可以直接在flutter engine的c++层去和v8通信。通信时间长,可能对UI的帧率造成影响。

flutter2.0

2.0发布了,请问下团队有兼容2.0的计划么

关于 Hippy

想问一下怎么评价qq浏览器团队开源的 Hippy 呢? 个人感觉可能Hippy发展可能更好一些。。。

编译时候报错

git clone 后,
下载依赖
然后报错。
报错位置在:
/lib/src/mx_json_proxy_cupertino.dart
line 395 CupertinoFullscreenDialogTransition
报错内容:

mxflutter/lib/src/mx_json_proxy_cupertino.dart:397:7: Error: No named parameter with the name 'primaryRouteAnimation'.

image

ios 13.1 运行白屏

2019-10-28 15:29:09.747591+0800 Runner[6356:2276084] Metal API Validation Enabled
2019-10-28 15:29:10.095575+0800 Runner[6356:2276355] flutter: Observatory listening on http://127.0.0.1:57170/X5EtNoo0FL4=/
2019-10-28 15:29:10.371420+0800 Runner[6356:2276357] [VERBOSE-2:ui_dart_state.cc(144)] Unhandled Exception: ServicesBinding.defaultBinaryMessenger was accessed before the binding was initialized.
If you're running an application and need to access the binary messenger before runApp() has been called (for example, during plugin initialization), then you need to explicitly call the WidgetsFlutterBinding.ensureInitialized() first.
If you're running a test, you can call the TestWidgetsFlutterBinding.ensureInitialized() as the first line in your test's main() method to initialize the binding.
#0 defaultBinaryMessenger. (package:flutter/src/services/binary_messenger.dart:73:7)
#1 defaultBinaryMessenger (package:flutter/src/services/binary_messenger.dart:86:4)
#2 MethodChannel.binaryMessenger (package:flutter/src/services/platform_channel.dart:140:62)
#3 MethodChannel.setMethodCallHandler (package:flutter/src/services/platform_channel.dart:368:5)
#4 MXJSFlutter.setupChannel (package:js_flutter/js_flutter/mx_js_framework.dart:45:27)
#5 MXJSFlutter.setup (package:js_flutter/js_flutter/mx_js_framework.dart:40:5)
#6 main (package:js_flutter/main.dart:11:29)
#7 _runMainZoned.. (dart:ui/hooks.dart:239:25)
#8 _rootRun (dart:async/zone.dart:1124:13)
#9 _CustomZone.run (dart:async/zone.dart:1021:19)
#10 _runZoned (dart:async/zone.dart:1516:10)
#11 runZoned (dart:async/zone.dart:1500:12)
#12 _runMainZoned. (dart:ui/hooks.dart:231:5)
#13 _startIsolate. (dart:isolate-patch/isolate_patch.dart:305:19)
#14 _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:172:12)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.