https://github.com/asscre/misty
Misty，通过极小的引用实现 SPA web项目在Flutter上面享受到小程序的体验。
https://github.com/asscre/misty
flutter miniapps webview
Last synced: 4 months ago
JSON representation
Misty，通过极小的引用实现 SPA web项目在Flutter上面享受到小程序的体验。
- Host: GitHub
- URL: https://github.com/asscre/misty
- Owner: Asscre
- License: mit
- Created: 2022-08-05T03:10:59.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2022-11-29T07:56:10.000Z (over 3 years ago)
- Last Synced: 2024-08-22T23:39:32.258Z (almost 2 years ago)
- Topics: flutter, miniapps, webview
- Language: Dart
- Homepage:
- Size: 166 KB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
## Misty - 一个Flutter web项目的本地缓存解决方案.
通过拦截浏览器网络请求，读取本地资源文件，减少网络资源请求来提高网页的开启速度，实现Flutter的原生手势交互的Flutter web preload解决方案。
Misty，如名所示，通过极小的引用实现 SPA web项目在Flutter上面享受到小程序般的体验。
## 使用
### 1. 导入(pubspec.yaml)
```
dependencies:
misty:
```
### 2. 启动本地web服务
```dart
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);
```
### 3. 使用
#### 打开程序
```dart
Misty.openMisty(context, url);
```
#### Flutter 调用 Js
```dart
MistyHandler().callJs('欢迎使用Misty！');
```
> Js 挂载 事件
```javascript
function flutterCallJs(param : any) {
console.log(param);
}
window.flutterCallJs = flutterCallJs;
```
#### Js 调用 Flutter
```javascript
window.MistyCallFlutter.postMessage('getDataFormFlutter');
```
```dart
/// 监听来自Web的消息
MistyEventController().addEventListener((event) {
print(event);
});
```
## 展示
Misty’s [官方demo](https://github.com/Asscre/misty-app") 帮助你快速了解如何集成属于你自己的Flutter小程序功能.
- web项目引用： [vite-vue3-template](https://github.com/Asscre/vite-vue3-template)
[misty-app](https://github.com/Asscre/misty-app)
## 项目设计规划
- ✅ Web 资源管理器 (版本管理，资源下载管理)
- ✅ WebView 资源和网络代理
- ✅️ Flutter 与 Web 项目原生交互
- ☑️ Misty UI框架，帮助快速搭建 Misty 程序
## 持续更新
为了保证正常版本更新和迭代，😁更新迭代的规则如下：
- ⭕️ 优先 版本开发 和 修复 BUG
- ⭕️ 然后是 需求榜
- ⭕️ 其次是 其他定制化
## MIT License