misty

Description:

misty

Misty - 一个Flutter web项目的本地缓存解决方案. #
通过拦截浏览器网络请求，读取本地资源文件，减少网络资源请求来提高网页的开启速度，实现Flutter的原生手势交互的Flutter web preload解决方案。
Misty，如名所示，通过极小的引用实现 SPA web项目在Flutter上面享受到小程序般的体验。
使用 #
1. 导入(pubspec.yaml) #
dependencies:
misty: <latest_version>
copied to clipboard
2. 启动本地web服务 #
MistyStartModel mistyStartOption = MistyStartModel(
baseHost: 'https://mistyapp.oss-cn-hangzhou.aliyuncs.com',
options: [
Option(
key: 'misty-app-one',
open: 1,
priority: 0,
version: '202208161155',
),
Option(
key: 'misty-app-two',
open: 1,
priority: 0,
version: '202208151527',
),
],
basics: Basics(
common: Common(
compress: '/common.zip',
version: '202208151527',
),
),
assets: [
{
'misty-app-one': '/misty-app-one/misty-app.zip',
},
{
'misty-app-two': '/misty-app-two/misty-app.zip',
},
],
);

Misty.start(mistyStartOption);
copied to clipboard
3. 使用 #
打开程序
Misty.openMisty(context, url);
copied to clipboard
Flutter 调用 Js
MistyHandler().callJs('欢迎使用Misty！');
copied to clipboard

Js 挂载 事件

function flutterCallJs(param : any) {
console.log(param);
}

window.flutterCallJs = flutterCallJs;
copied to clipboard
Js 调用 Flutter
window.MistyCallFlutter.postMessage('getDataFormFlutter');
copied to clipboard
/// 监听来自Web的消息
MistyEventController().addEventListener((event) {
print(event);
});
copied to clipboard
展示 #

Misty’s 官方demo 帮助你快速了解如何集成属于你自己的Flutter小程序功能.

web项目引用： vite-vue3-template
misty-app

项目设计规划 #

✅ Web 资源管理器 (版本管理，资源下载管理)
✅ WebView 资源和网络代理
✅️ Flutter 与 Web 项目原生交互
☑️ Misty UI框架，帮助快速搭建 Misty 程序

持续更新 #
为了保证正常版本更新和迭代，😁更新迭代的规则如下：

⭕️ 优先 版本开发 和 修复 BUG
⭕️ 然后是 需求榜
⭕️ 其次是 其他定制化

支持 Misty #

如果觉得Misty帮助到您，请支持一杯☕️呗！


MIT License #