The mpflutter from mpflutter

小程序页面加载速度，平均在3秒上下

查看了官方的线上小程序，从首页进入装修设计、福利团页面，加载时间都在3秒以上。
点击我页面加载速度在2秒以上。

这个加载速度是否可优化目前页面的加载体验感觉还有提升空间

[√] Flutter (Channel stable, 2.5.3, on Microsoft Windows [Version 10.0.19043.1348], locale zh-CN) [√] Android toolchain - develop for Android devices (Android SDK version 31.0.0) [√] Chrome - develop for the web [√] Android Studio (version 2020.3) [√] Connected device (2 available)
Dart
Dart SDK version: 2.14.4 (stable) (Wed Oct 13 11:11:32 2021 +0200) on "windows_x64"
使用命令 dart scripts/build_weapp.dart

尝试Ctrl+c 回车都没反应

扩展平台京东小程序

支持构建原生 Flutter 应用

将 weui 的 picker API 封装为组件，与小程序的 picker 组件保持统一

will it support cupertino and material widgets?

小程序使用原生的 PickerView 组件接入

尝试以 Plugin 形式接入 antd 组件及主题

扩展至支付宝小程序

添加对图片过滤器的支持

类似flutter的BackdropFilter

./mpdart scripts/build_web.dart 编译失败

当开发完成后，你可以通过以下命令构建 Web (HTML5) 产物。

./mpdart scripts/build_web.dart

构建完成后，产物位于 build 目录下。

按照文档，执行 ./mpdart scripts/build_web.dart -h -v
编译错误如下提示，build/main.dart.js，但是build还没生成文件，这个具体是什么问题呢？

 ./mpdart scripts/build_web.dart -h -v
正在构建...
Unhandled exception:
FileSystemException: Cannot open file, path = 'build/main.dart.js' (OS Error: No such file or directory, errno = 2)
# 0      _File.throwIfError (dart:io/file_impl.dart:635:7)
# 1      _File.openSync (dart:io/file_impl.dart:479:5)
# 2      _File.readAsBytesSync (dart:io/file_impl.dart:539:18)
# 3      _File.readAsStringSync (dart:io/file_impl.dart:584:18)
# 4      _fixDefererLoader (package:mp_build_tools/build_web.dart:81:41)
# 5      _buildDartJS (package:mp_build_tools/build_web.dart:55:3)
# 6      main (package:mp_build_tools/build_web.dart:13:3)
# 7      main (file:///Users/zby0520/WeChatProjects/awesome_project/scripts/build_web.dart:4:11)
# 8      _delayEntrypointInvocation.<anonymous closure> (dart:isolate-patch/isolate_patch.dart:295:32)
# 9      _RawReceivePortImpl._handleMessage (dart:isolate-patch/isolate_patch.dart:192:12)
(base) philos:awesome_project zby0520$

有没有微信群或者QQ群交流呢？

添加微信小程序的假页支持

目前 showMPDialog 展示出的对话框，整个页面会随用户从屏幕边缘右划、点按返回键而消失，这不符合 UI 交互预期。
应使用微信小程序的假页辅助开发。

完善 Canvas 功能

应允许响应 Canvas 上的触摸事件，并回调至 Dart 上下文。
应允许保存 Canvas 画面至 PNG 文件，并回调至 Dart 中。

开发
完善用例（手写签名板）
编写文档

构思外部推广文

支持 LayoutBuilder 组件，支持 TextPainter API。

需要实现 LayoutBuilder 组件在 mpflutter 中的使用，同时需要支持 TextPainter API 用于 measure 文本宽高。

开发
用例
文档

小程序、Web Switch / Slider 实现

MPSwitch
MPSlider

扩展至京东小程序

完善 2D Canvas 文本绘制能力

当前 CustomPaint 不支持文本渲染，也不支持文本测量，使用 CustomPaint 自带的 API 预估不能实现等价的效果，后续看是否可以设计另外的文本绘制 API 并连接到特定平台实现。

设计
开发
用例
文档

🙏 功德无量～建议可以在README里面贴下打赏码，或者付费解锁项目Demo

这个项目，太棒了！！

另外希望能有完整项目的Demo代码（不是一兜糖，随便什么都可以，类似flutter组件演示那种演示APP）

可以接受付费解锁完整项目Demo代码

Playground 只显示RUN，点击控制台报错

Uncaught SyntaxError: Illegal return statement
DevTools 无法加载源映射：无法加载https://cdn.jsdelivr.net/npm/[email protected]/min-maps/vs/editor/editor.main.js.map 的内容:加载超时导致加载取消
DevTools 无法加载源映射：无法加载https://cdn.jsdelivr.net/npm/[email protected]/min-maps/vs/loader.js.map 的内容:加载超时导致加载取消
DevTools 无法加载源映射：无法加载https://cdn.jsdelivr.net/npm/[email protected]/min-maps/vs/editor/editor.main.nls.js.map 的内容:加载超时导致加载取消
DevTools 无法加载源映射：无法加载https://cdn.jsdelivr.net/npm/[email protected]/min-maps/vs/editor/editor.main.js.map 的内容:加载超时导致加载取消

修正 envHost() 在 Debug 状态下不准确的问题

因 envHost() 目前是取构建时的 dart-define 值，而在 Debug 模式下，并不能取到正确的 define 值。

可修正为，取最后一个连接到 host 的客户端类型值。

EditableText setState 丢失焦点

EditableText(
controller: _textEditingController,
focusNode: _focusNode,
placeholder: '搜索你想关联的xxxx',
style: TextStyle(
color: YUIColors.textBlack,
fontSize: 14,
),
)

_textEditingController.addListener(() {
  setState(() {});  //输入框有内容时，最右边显示“清除输入按钮”
});

小程序动画性能优化

MPFlutter 播放动画的原理是通过不断地发送 diff_data，驱动小程序使用 setData 的方式，更新 DOM 树。
这种方式在 H5 上没有什么性能问题，但在小程序真机上，一旦超过 2 个动画同时进行时，可出现丢帧等问题。
详见 mpflutter_sample 中的 Animation -> Performance Test 用例。
@PonyCui

开个qq群呢

扩展至钉钉小程序

支持在 Android Studio 以及 Windows 下调试应用

请问在intellij或者android studio中怎么使用,deam在下面跑不起来,9898端口没有打开

编译小程序错误

编译时会自动删除/build/assets文件夹

补全文档，构思如何重构文档。

tab切换页面，页面重复加载

例如首页切换到装修设计页面，再切换回首页，整个首页页面会重新加载。

对MPPageView提供controller 以用来获取当前index

对于现在MPPageView来说可能更像轮播图一样了

MPEditableText设置TextAlign.end，获取焦点后失效

https://mpflutter.com/zh/docs/mp-editable-text这个页面里面的demo加个textAlign: TextAlign.end,就可以复现

MPApp增加navigatorKey

nav_router这个插件需要设置navigatorKey

WebGL 实现

当前 CustomPaint 提供的是 2D 绘图接口，平台实现也是通过 Canvas 2D API 实现的。
但在实际开发中，确实有需要用到 WebGL，我们需要设计一个新的 MPKit Widget，专用于 WebGL 绘制。
近期计划是支持大部分的 WebGL 1.0 API 使用，中期计划是支持使用 three.js 作为插件，结合 WebGL Widget 实现 3D 绘制及交互。

优化平台扩展开发工作流

当前 MPFlutter 是通过使用 mpflutter_plugin_template 的方式开发平台扩展的，这个工作流对于开发者来说，并不友好。
我们将尝试将平台扩展工作流集成到 mpflutter/mp_build_tools 中，目标是做到开发者在三步以内完成一个扩展开发。

开发
用例
文档

扩展平台支付宝小程序

支持输出至支付宝小程序，面临以下问题。
x 支付宝调试工具对于 ScrollView 支持不友好

在 Sample 工程中补充 Canvas 的用例

微信小程序的原生功能怎么调用,比如说扫描二维码

Widget Row不受约束超出边界

MPScaffold( name: widget.name, body: Container( padding: EdgeInsets.only(bottom: 56, left: 10, right: 10, top: 10), child: SingleChildScrollView( child: Column( children: [ Container( margin: EdgeInsets.only(top: 10), width: 180, child: Row( children: [ Text( 'Voluptate ex occaecat ipsum proident sunt et id pariatur. Amet duis ipsum ipsum eu consequat ad irure reprehenderit incididunt do ut. Quis incididunt ea voluptate cupidatat ex consequat qui ea elit ad qui ut dolor commodo.') ], ), ), ], ), )), );

Intro

Hi can someone please tell me,
That.
What will be the differences between Flutter normal web app and MPFlutter web app?
Are there any performance and initial loading improvements?

打包构建长时间等待无报错信息

执行 dart scripts/build_web.dart，打印构建中，长时间未完成，无报错信息

flutter doctor -v
[✓] Flutter (Channel stable, 2.8.0, on macOS 11.6 20G165 darwin-x64, locale
zh-Hans-CN)
• Flutter version 2.8.0 at /Users/zby0520/flutter/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision cf44000065 (7 days ago), 2021-12-08 14:06:50 -0800
• Engine revision 40a99c5951
• Dart version 2.15.0
• Pub download mirror https://pub.flutter-io.cn
• Flutter download mirror https://storage.flutter-io.cn

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
• Android SDK at /Users/zby0520/Library/Android/sdk
• Platform android-31, build-tools 31.0.0
• ANDROID_SDK_ROOT = /Users/zby0520/Library/Android/sdk
• Java binary at: /Applications/Android
Studio.app/Contents/jre/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 13.0)
• Xcode at /Applications/Xcode.app/Contents/Developer
• CocoaPods version 1.10.1

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2020.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7281165)

[✓] IntelliJ IDEA Ultimate Edition (version 2020.1.3)
• IntelliJ at /Applications/IntelliJ IDEA.app
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] Connected device (1 available)
• Chrome (web) • chrome • web-javascript • Google Chrome 95.0.4638.69

• No issues found!

遇到的问题
按文档使用命令行，通过 git clone 方式克隆模板工程至目标目录后，执行 ./mpdart pub get ，提示如下：

···
./mpdart pub get
Resolving dependencies... (1.3s)
Because mpflutter_template depends on path_provider >=0.4.0 which requires the Flutter
SDK, version solving failed.

Flutter users should run flutter pub get instead of dart pub get.
···

遇到问题的场景 (微信小程序或 Web 或其它？)

操作系统： ubuntu 20.04
IDE: vscode

重现方法（最好能提供一个 Demo，打包上传至 GitHub）

模板工程更新依赖时出现

flutter 的版本

flutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (2 周前) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

dart --version
Dart SDK version: 2.15.1 (stable) (Unknown timestamp) on "linux_x64"

dart2js --version
Dart-to-JavaScript compiler (dart2js) version: 2.15.1

mpflutter 的版本（ mpcore 的版本）

不确定是不是这样查看

./mpflutter --version
Flutter 2.8.1 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 77d935af4d (2 周前) • 2021-12-16 08:37:33 -0800
Engine • revision 890a5fca2e
Tools • Dart 2.15.1

支持小程序根据路由表生成实体页面

为了更适合小程序特性，我们应该支持在小程序编译时，自动读取路由表，并根据路由表生成相应的 pages。
当应用需要 navigate 到相应路由页面时，优先使用生成的 page 作跳转。

开发
测试用例
编写文档

将小程序的各种组件分拆至 universal_miniprogram_api 库

目前 mpcore 承载了太多非核心组件，应该将 miniprogram 次要组件拆分至 universal_miniprogram_api 库，并补充完整所有组件。

新建 MPMiniProgramView
分拆 WechatMiniProgram 组件

mpflutter / mpflutter Goto Github PK

mpflutter's Introduction

MPFlutter 2.0

原生 Flutter 开发体验

高性能的渲染体验

完整的 API 生态配套

开始体验

授权

商业目的定义

授权购买方式

mpflutter's People

Contributors

Stargazers

Watchers

Forkers

mpflutter's Issues

Recommend Projects

Recommend Topics

Recommend Org