• Stars
    star
    857
  • Rank 52,972 (Top 2 %)
  • Language
    Dart
  • License
    Other
  • Created over 3 years ago
  • Updated about 3 years ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

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

MXFlutter Beta v0.9.0

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 接入指南

版本对应关系

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目前处于开发阶段, MXFlutter 针对自己业务用到的 Widget 和 Api 进行了验证和测试,但因 Flutter Widget 数量太多,团队人力有限,无法对所有提供的 Widget 进行支持和功能验证,所以把代码开源出来,有需要的团队可以一起来完善和演进。如在生产环境使用,确保理解MXFlutter运行原理,并对业务使用到的TS Widget进行完整测试,也欢迎贡献测试完成的名单。


一、介绍

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,建设配套设施,如果大家有兴趣,欢迎加入一起开发。 如果你有好的想法或建议,也欢迎给我们提 IssuesPull Requests

九、联系我们

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

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

qrcode

More Repositories

1

weui

A UI library by WeChat official design team, includes the most useful widgets/modules in mobile web applications.
Less
27,140
star
2

wepy

小程序组件化开发框架
JavaScript
22,491
star
3

ncnn

ncnn is a high-performance neural network inference framework optimized for the mobile platform
C++
19,861
star
4

mars

Mars is a cross-platform network component developed by WeChat.
C++
17,249
star
5

MMKV

An efficient, small mobile key-value storage framework developed by WeChat. Works on Android, iOS, macOS, Windows, and POSIX.
C++
17,138
star
6

tinker

Tinker is a hot-fix solution library for Android, it supports dex, library and resources update without reinstall apk.
Java
17,137
star
7

APIJSON

🏆 实时 零代码、全功能、强安全 ORM 库 🚀 后端接口和文档零代码,前端(客户端) 定制返回 JSON 的数据和结构 🏆 Real-Time coding-free, powerful and secure ORM 🚀 providing APIs and Docs without coding by Backend, and the returned JSON of API can be customized by Frontend(Client) users
Java
17,052
star
8

vConsole

A lightweight, extendable front-end developer tool for mobile web page.
TypeScript
16,716
star
9

weui-wxss

A UI library by WeChat official design team, includes the most useful widgets/modules.
Less
15,070
star
10

QMUI_Android

提高 Android UI 开发效率的 UI 库
Java
14,423
star
11

rapidjson

A fast JSON parser/generator for C++ with both SAX/DOM style API
C++
14,163
star
12

secguide

面向开发人员梳理的代码安全指南
13,203
star
13

omi

Web Components Framework - Web组件框架
TypeScript
13,001
star
14

VasSonic

VasSonic is a lightweight and high-performance Hybrid framework developed by tencent VAS team, which is intended to speed up the first screen of websites working on Android and iOS platform.
Java
11,801
star
15

matrix

Matrix is a plugin style, non-invasive APM system developed by WeChat.
Java
11,544
star
16

wcdb

WCDB is a cross-platform database framework developed by WeChat.
C
10,777
star
17

xLua

xLua is a lua programming solution for C# ( Unity, .Net, Mono) , it supports android, ios, windows, linux, osx, etc.
C
9,296
star
18

libco

libco is a coroutine library which is widely used in wechat back-end service. It has been running on tens of thousands of machines since 2013.
C++
8,223
star
19

Hippy

Hippy is designed to easily build cross-platform dynamic apps. 👏
C++
7,955
star
20

Shadow

零反射全动态Android插件框架
Java
7,382
star
21

QMUI_iOS

QMUI iOS——致力于提高项目 UI 开发效率的解决方案
Objective-C
7,084
star
22

lemon-cleaner

腾讯柠檬清理是针对macOS系统专属制定的清理工具。主要功能包括重复文件和相似照片的识别、软件的定制化垃圾扫描、可视化的全盘空间分析、内存释放、浏览器隐私清理以及设备实时状态的监控等。重点聚焦清理功能,对上百款软件提供定制化的清理方案,提供专业的清理建议,帮助用户轻松完成一键式清理。
Objective-C
5,421
star
23

MLeaksFinder

Find memory leaks in your iOS app at develop time.
Objective-C
5,419
star
24

libpag

The official rendering library for PAG (Portable Animated Graphics) files that renders After Effects animations natively across multiple platforms.
C++
4,943
star
25

puerts

PUER(普洱) Typescript. Let's write your game in UE or Unity with TypeScript.
C++
4,902
star
26

kbone

一个致力于微信小程序和 Web 端同构的解决方案
JavaScript
4,772
star
27

TNN

TNN: developed by Tencent Youtu Lab and Guangying Lab, a uniform deep learning inference framework for mobile、desktop and server. TNN is distinguished by several outstanding features, including its cross-platform capability, high performance, model compression and code pruning. Based on ncnn and Rapidnet, TNN further strengthens the support and performance optimization for mobile devices, and also draws on the advantages of good extensibility and high performance from existed open source efforts. TNN has been deployed in multiple Apps from Tencent, such as Mobile QQ, Weishi, Pitu, etc. Contributions are welcome to work in collaborative with us and make TNN a better framework.
C++
4,388
star
28

GT

GT (Great Tit) is a portable debugging tool for bug hunting and performance tuning on smartphones anytime and anywhere just as listening music with Walkman. GT can act as the Integrated Debug Environment by directly running on smartphones.
Java
4,387
star
29

westore

小程序项目分层架构
JavaScript
4,237
star
30

tmagic-editor

TypeScript
4,190
star
31

wujie

极致的微前端框架
TypeScript
4,023
star
32

vap

VAP是企鹅电竞开发,用于播放特效动画的实现方案。具有高压缩率、硬件解码等优点。同时支持 iOS,Android,Web 平台。
Objective-C
3,893
star
33

cherry-markdown

✨ A Markdown Editor
JavaScript
3,505
star
34

phxpaxos

The Paxos library implemented in C++ that has been used in the WeChat production environment.
C++
3,351
star
35

WeFlow

A web developer workflow tool by WeChat team based on tmt-workflow, with cross-platform supported and environment ready.
JavaScript
3,224
star
36

spring-cloud-tencent

Spring Cloud Tencent is a Spring Cloud based Service Governance Framework provided by Tencent.
Java
3,171
star
37

weui.js

A lightweight javascript library for WeUI.
JavaScript
3,167
star
38

tdesign

Enterprise Design System
Vue
3,139
star
39

tencent-ml-images

Largest multi-label image database; ResNet-101 model; 80.73% top-1 acc on ImageNet
Python
3,051
star
40

VasDolly

Android V1 and V2 Signature Channel Package Plugin
Java
3,048
star
41

HunyuanDiT

Hunyuan-DiT : A Powerful Multi-Resolution Diffusion Transformer with Fine-Grained Chinese Understanding
Python
2,945
star
42

Tendis

Tendis is a high-performance distributed storage system fully compatible with the Redis protocol.
C++
2,919
star
43

FaceDetection-DSFD

腾讯优图高精度双分支人脸检测器
Python
2,885
star
44

PhoenixGo

Go AI program which implements the AlphaGo Zero paper
C++
2,871
star
45

behaviac

behaviac is a framework of the game AI development, and it also can be used as a rapid game prototype design tool. behaviac supports the behavior tree, finite state machine and hierarchical task network(BT, FSM, HTN)
C#
2,829
star
46

PocketFlow

An Automatic Model Compression (AutoMC) framework for developing smaller and faster AI applications.
Python
2,783
star
47

MSEC

Mass Service Engine in Cluster(MSEC) is opened source by QQ team from Tencent. It is a backend DEV &OPS engine, including RPC,name finding,load balance,monitoring,release and capacity management.
Java
2,746
star
48

phxsql

A high availability MySQL cluster that guarantees data consistency between a master and slaves.
C++
2,470
star
49

OOMDetector

OOMDetector is a memory monitoring component for iOS which provides you with OOM monitoring, memory allocation monitoring, memory leak detection and other functions.
Objective-C++
2,312
star
50

tsf

coroutine and Swoole based php server framework in tencent
PHP
2,179
star
51

tmt-workflow

A web developer workflow used by WeChat team based on Gulp, with cross-platform supported and solutions prepared.
CSS
2,173
star
52

UnLua

A feature-rich, easy-learning and highly optimized Lua scripting plugin for UE.
C++
2,169
star
53

Hardcoder

Hardcoder is a solution which allows Android APP and Android System to communicate with each other directly, solving the problem that Android APP could only use system standard API rather than the hardware resource of system.
C++
2,155
star
54

LKImageKit

A high-performance image framework, including a series of capabilities such as image views, image downloader, memory caches, disk caches, image decoders and image processors.
Objective-C
2,082
star
55

GameAISDK

基于图像的游戏AI自动化框架
C++
2,030
star
56

TubeMQ

TubeMQ has been donated to the Apache Software Foundation and renamed to InLong, please visit the new Apache repository: https://github.com/apache/incubator-inlong
2,022
star
57

phxrpc

A simple C++ based RPC framework.
C++
1,974
star
58

TscanCode

A static code analyzer for C++, C#, Lua
C++
1,972
star
59

ObjectDetection-OneStageDet

单阶段通用目标检测器
Python
1,966
star
60

InjectFix

InjectFix is a hot-fix solution library for Unity
C#
1,961
star
61

cloudbase-framework

腾讯云开发云原生一体化部署工具 🚀 CloudBase Framework:一键部署,不限框架语言,云端一体化开发,基于Serverless 架构。A front-end and back-end integrated deployment tool. One-click deploy to serverless architecture. https://docs.cloudbase.net/framework/index
JavaScript
1,937
star
62

soter

A secure and quick biometric authentication standard and platform in Android held by Tencent.
Java
1,923
star
63

phxqueue

A high-availability, high-throughput and highly reliable distributed queue based on the Paxos algorithm.
C++
1,899
star
64

plato

腾讯高性能分布式图计算框架Plato
C++
1,895
star
65

MedicalNet

Many studies have shown that the performance on deep learning is significantly affected by volume of training data. The MedicalNet project provides a series of 3D-ResNet pre-trained models and relative code.
Python
1,888
star
66

NeuralNLP-NeuralClassifier

An Open-source Neural Hierarchical Multi-label Text Classification Toolkit
Python
1,807
star
67

TSW

Tencent Server Web
TypeScript
1,803
star
68

sluaunreal

lua dev plugin for unreal engine 4 or 5
C++
1,734
star
69

QMUI_Web

An efficient front-end framework for developers building UI on the web.
JavaScript
1,719
star
70

Biny

Biny is a tiny, high-performance PHP framework for web applications
PHP
1,687
star
71

Metis

Metis is a learnware platform in the field of AIOps.
Python
1,682
star
72

paxosstore

PaxosStore has been deployed in WeChat production for more than two years, providing storage services for the core businesses of WeChat backend. Now PaxosStore is running on thousands of machines, and is able to afford billions of peak TPS.
C++
1,665
star
73

CodeAnalysis

Static Code Analysis - 静态代码分析
Python
1,639
star
74

MimicMotion

High-Quality Human Motion Video Generation with Confidence-aware Pose Guidance
Python
1,475
star
75

TurboTransformers

a fast and user-friendly runtime for transformer inference (Bert, Albert, GPT2, Decoders, etc) on CPU and GPU.
C++
1,464
star
76

tdesign-vue-next

A Vue3.x UI components lib for TDesign.
TypeScript
1,428
star
77

nohost

基于 Whistle 实现的多账号多环境远程配置及抓包调试平台
JavaScript
1,416
star
78

TencentOS-kernel

腾讯针对云的场景研发的服务器操作系统
1,408
star
79

TBase

TBase is an enterprise-level distributed HTAP database. Through a single database cluster to provide users with highly consistent distributed database services and high-performance data warehouse services, a set of integrated enterprise-level solutions is formed.
C
1,380
star
80

WeDemo

WeDemo为微信团队开源项目,用于帮助微信开发者完成微信登录、微信分享等功能的接入和开发。开发者可参考源代码完成开发,也可以直接将代码应用到自己的App开发中,安全、便捷地在App中实现微信分享、微信登录功能。
Objective-C
1,371
star
81

feflow

🚀 A command line tool aims to improve front-end engineer workflow and standard, powered by TypeScript.
TypeScript
1,360
star
82

GAutomator

Automation for mobile games
Objective-C
1,331
star
83

flare

Flare是广泛投产于腾讯广告后台的现代化C++开发框架,包含了基础库、RPC、各种客户端等。主要特点为易用性强、长尾延迟低。
C++
1,308
star
84

TFace

A trusty face analysis research platform developed by Tencent Youtu Lab
Python
1,289
star
85

LuaPanda

lua debug and code tools for VS Code
Lua
1,235
star
86

FeatherCNN

FeatherCNN is a high performance inference engine for convolutional neural networks.
C++
1,208
star
87

tdesign-miniprogram

A Wechat MiniProgram UI components lib for TDesign.
HTML
1,195
star
88

tgfx

A lightweight 2D graphics library for rendering texts, geometries, and images with high-performance APIs that work across various platforms.
C++
1,057
star
89

tquic

A high-performance, lightweight, and cross-platform QUIC library
Rust
1,020
star
90

TencentPretrain

Tencent Pre-training framework in PyTorch & Pre-trained Model Zoo
Python
1,005
star
91

RapidView

RapidView is an android ui and lightapp development framework
Java
979
star
92

hel

A module federation SDK which is unrelated to tool chain for module consumer. 工具链无关的运行时模块联邦sdk.
JavaScript
959
star
93

TencentKona-8

Tencent Kona is a no-cost, production-ready distribution of the Open Java Development Kit (OpenJDK), Long-term support(LTS) with quarterly updates. Tencent Kona serves as the default JDK internally at Tencent Cloud for cloud computing and other Java applications.
Java
937
star
94

FAutoTest

A UI automated testing framework for H5 and applets
Python
932
star
95

tdesign-vue

A Vue.js UI components lib for TDesign.
TypeScript
899
star
96

Pebble

Pebble分布式开发框架
C++
866
star
97

Face2FaceTranslator

面对面翻译小程序是微信团队针对面对面沟通的场景开发的流式语音翻译小程序,通过微信同声传译插件提供了语音识别,文本翻译等功能。
JavaScript
836
star
98

tdesign-react

A React UI components lib for TDesign.
TypeScript
821
star
99

LightDiffusionFlow

This extension is developed for AUTOMATIC1111's Stable Diffusion web UI that provides import/export options for parameters.
JavaScript
798
star
100

Real-SR

Real-World Super-Resolution via Kernel Estimation and Noise Injection
Python
769
star