{"id":19965648,"url":"https://github.com/tencent/mxflutter","last_synced_at":"2025-04-04T12:07:14.421Z","repository":{"id":37758252,"uuid":"350322516","full_name":"Tencent/mxflutter","owner":"Tencent","description":"使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。","archived":false,"fork":false,"pushed_at":"2021-07-29T12:14:45.000Z","size":29583,"stargazers_count":881,"open_issues_count":5,"forks_count":71,"subscribers_count":18,"default_branch":"master","last_synced_at":"2025-03-28T11:07:49.428Z","etag":null,"topics":["dart","flutter","typescript"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Tencent.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-03-22T11:44:49.000Z","updated_at":"2025-03-22T07:05:35.000Z","dependencies_parsed_at":"2022-07-14T00:50:39.529Z","dependency_job_id":null,"html_url":"https://github.com/Tencent/mxflutter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fmxflutter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fmxflutter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fmxflutter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Tencent%2Fmxflutter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Tencent","download_url":"https://codeload.github.com/Tencent/mxflutter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247174417,"owners_count":20896078,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["dart","flutter","typescript"],"created_at":"2024-11-13T02:29:57.958Z","updated_at":"2025-04-04T12:07:14.401Z","avatar_url":"https://github.com/Tencent.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"![](http://pub.idqqimg.com/pc/misc/files/20210319/c54881a48c8847559bc80e1c1500dfe4.png)\r\n----\r\n\r\n\r\n# MXFlutter Beta v0.9.0\r\n\r\n MXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。\r\n\r\n框架支持两种开发方式\r\n1. 基于 mxflutter-js 前端框架，使用  TypeScript 语言，以类似 Flutter 的 Widget 组装方式开发UI，借助前端生态的基础能力，开发App。（前端框架已开源: [github:mxflutter-js](https://github.com/mxflutter/mxflutter-js)）\r\n2. 不改变现有 Flutter 的开发方式，使用 MXJSCompiler 把现有工程编译为JS，运行在 mxflutter 框架之上。（ MXJSCompiler JS编译工具在开源计划中 ）\r\n\r\n\r\n可以安装 Android的包来体验  [MXFlutter_v0-9-0.apk](https://github.com/mxflutter/awesome_mxflutter/releases/download/v0.9.0/awesome-mxflutter-0-9-0.apk)。\r\n\r\n接入的详细步骤，请参阅 [mxflutter 接入指南](Documentation/接入指南.md)\r\n\r\n#### 版本对应关系\r\n\r\n| v0.9.0 | Flutter 1.22.3 |\r\n| --- | --- |\r\n| [v0.8.0](https://github.com/mxflutter/mxflutter) | Flutter 1.20.3  |\r\n\r\n#### 相关代码库\r\n\r\n\r\n| 代码库 | 简介 | 地址 |\r\n| --- | --- | --- |\r\n| mxflutter | Flutter Plugin ，使用JS Bundle 渲染页面 | https://github.com/tencent/mxflutter.git |\r\n| mxflutter-js | TS 前端框架，支撑使用Flutter Widget 组装方式开发UI | https://github.com/mxflutter/mxflutter-js |\r\n| mxflutter_pkg | mxflutter 第三方Package支持的示例 | https://github.com/mxflutter/mxflutter_pkg |\r\n| awesome_mxflutter | Flutter 示例工程，演示如何运行JS Bundle | https://github.com/mxflutter/awesome_mxflutter |\r\n| mxflutter-js-demo | JS 示例工程，演示如何使用TS开发Flutter | https://github.com/mxflutter/mxflutter-js-demo |\r\n| mx_mirror_builder | 辅助工具，用于生成 TS 类定义和 Mirror 映射 | https://github.com/mxflutter/mx_mirror_builder |\r\n\r\n\r\n\r\n\r\n##### **重要提示：MXFlutter目前处于开发阶段， MXFlutter 针对自己业务用到的 Widget 和 Api 进行了验证和测试，但因 Flutter Widget 数量太多，团队人力有限，无法对所有提供的 Widget 进行支持和功能验证，所以把代码开源出来，有需要的团队可以一起来完善和演进。如在生产环境使用，确保理解MXFlutter运行原理，并对业务使用到的TS Widget进行完整测试，也欢迎贡献测试完成的名单。**\r\n\r\n\r\n---\r\n\r\n*  [一、介绍](#title1)\r\n*  [二、应用](#title2)\r\n*  [三、特性](#title3)\r\n*  [四、设计思路](#title3)\r\n*  [五、架构](#title4)\r\n*  [六、如何使用](#title5)\r\n    * [接入指南](#title5_1)\r\n*  [七、许可协议](#title7)\r\n*  [八、参与贡献](#title8)\r\n*  [九、联系我们](#title9)\r\n\r\n----\r\n\r\n##  \u003ca name=\"title1\"\u003e一、介绍\u003c/a\u003e\r\n\r\n\r\nMXFlutter 是一套使用 TypeScript/JavaScript 来开发 Flutter 应用的框架。\r\n\r\nMXFlutter 在前端方向目前已经实现了使用 TypeScript 来编写，使用 Flutter Widget 的描述方式来开发业务。可以接入前端 npm 生态，并提供和 Flutter 原生十分接近的编码方式和语法提示等。MXFlutter 前端方向的未来规划是，实现 web前端 dom + css 的开发方式来接入 Flutter，通过 Vue / React 等前端熟悉的开发框架来编写业务代码，自动转换为 Flutter Widget 进行渲染，实现前端开发者的零成本接入。\r\n\r\nMXFlutter 在终端方向的思路使用 MXJSCompiler 把现有 Flutter 工程编译为JS，运行在 MXFlutter 框架之上。以 ReactNative 框架为参照， JS引擎的性能可以支撑大型App的运行。MXJSCompiler 编译工具目前在建设中，会在后续版本稳定之后开源。\r\n\r\n## \u003ca name=\"title2\"\u003e二、应用\u003c/a\u003e\r\n\r\n\r\n![](https://pub.idqqimg.com/pc/misc/files/20210323/3fa1b1c497a94ba3a445a0e262773949.jpg)\r\n\r\n\r\n## \u003ca name=\"title3\"\u003e三、特性\u003c/a\u003e\r\n\r\n* 支持 TypeScript 语言和前端生态\r\n* 支持 Flutter 中同名 Widget 类，相同API，已提供部分开发示例\r\n* 支持 Flutter 相同的 Build 方式，setState刷新及事件响应方法\r\n* 支持 JS 和 Dart 双向调用通道\r\n* 支持模拟器页面hot reload\r\n* 支持 Safari 和 Chrome 调试\r\n* 支持编译现有Flutter工程为JS，运行在框架之上\r\n\r\n\r\n\r\n## \u003ca name=\"title4\"\u003e四、设计思路\u003c/a\u003e\r\n\r\n把 Flutter 的渲染逻辑中的三棵树（即：WidgetTree、Element、RenderObject ）中的第一棵（即：WidgetTree），放到 JavaScript 中生成。用 JavaScript 完整实现了 Flutter 控件层封装，实现了轻量的响应式 UI 框架，支撑JS WidgetTree 的 build 逻辑，build 过程生成的UI描述， 通过Flutter 层的 UI 引擎转换成真正的 Flutter 控件显示出来。\r\n\r\n## \u003ca name=\"title5\"\u003e五、架构\u003c/a\u003e\r\n\r\n\r\n\r\n![](https://pub.idqqimg.com/pc/misc/files/20210430/e52819dfca7744d68f1d68f5ff05210e.jpg)\r\n\r\n\r\n## \u003ca name=\"title6\"\u003e六、如何使用\u003c/a\u003e\r\n\r\n### MXFlutter使用\r\n从0.7.0版本开始，MXFlutter 最大的变化是开发语言切换到了 TypeScript，接入了npm生态，相比原来裸写JS的开发方式，向前端生态靠拢。这样就解决了之前版本最痛的没有代码提示和静态检查的问题。\r\n\r\nMXFlutter 框架分为两部分，上层是 TypeScript 开发的 MXFlutter 前端框架，用于支撑使用TS来开发App，底层是Flutter开发的 MXFlutter Flutter Plugin，用于UI渲染。\r\n\r\n接入三部曲：\r\n\r\n* 第一步 在你的 Flutter 工程里引入 mxflutter flutter plugin。\r\n* 第二步 用 mxflutter cli 工具新建一个 TypeScript 的 mxflutter 工程。 开发完成之后编译输出JS Bundle文件。\r\n* 第三步 把 TS 工程编译的bundle-xxx.js 放置在你的Flutter工程制定目录下，然后就可以调用 mxflutter 提供的接口打开 TS 页面了。\r\n\r\n接入的详细步骤，请参阅 [mxflutter 接入指南](Documentation/接入指南.md)\r\n\r\n接入示例工程1 [示例工程](./example)\r\n\r\n接入示例工程2 [awesome-mxflutter](https://github.com/mxflutter/awesome_mxflutter)\r\n\r\n\r\n\r\n## \u003ca name=\"title7\"\u003e七、许可协议\u003c/a\u003e\r\n\r\nMXFlutter遵循[BSD](./LICENSE)开源许可证协议。\r\n\r\n\r\n\r\n## \u003ca name=\"title8\"\u003e八、参与贡献\u003c/a\u003e\r\n\r\nMXFlutter还需要很多工作去完善功能，修改BUG，建设配套设施，如果大家有兴趣，欢迎加入一起开发。\r\n如果你有好的想法或建议，也欢迎给我们提 `Issues` 或 `Pull Requests`。\r\n\r\n\r\n## \u003ca name=\"title9\"\u003e九、联系我们\u003c/a\u003e\r\n\r\n`MXFlutter Team` 是一个技术氛围浓厚，有美女有帅哥有趣有爱的团队，欢迎终端，后台，前端同学投递简历哦：mxflutter@qq.com\r\n\r\n对MXFlutter有兴趣的小伙伴，可以加群交流 QQ群:747535761\r\n\r\n![qrcode](https://github.com/langbluesky/Image/blob/master/qrcode.png?raw=true)\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Fmxflutter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftencent%2Fmxflutter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftencent%2Fmxflutter/lists"}