【Flutter开发技巧】我开发了一个Flutter支持Web项目本地缓存启动服务的插件：Misty

前言

最近 Asscre 遇到一个需求，就是把我们的 Web 项目在 Flutter 中静态启动，提升用户的体验的同时（其实产品想要的是小程序的体验），能使用我们现有的 Web 技术栈解决。

第一个想到的就是集成第三方的小程序SDK。

众所周知，我们国内的小程序开发框架基本上都是各个厂商为适配自己的需求定制的，但我们想要实现一些特殊的需求，官方没有适配的时候，只能“看别人的工期”；同时，各个厂商的小程序引擎SDK基本都是闭源的，所以导致我们想在Flutter项目中集成小程序只能自己造轮子( 其实市面上有解决方案，但，我想，web的问题为啥不能用web解决 )。

于是， Asscre 就在想如何利用现有的Vue和Flutter技术栈实现类似的体验，保留 Web 开放性的同时，能很好的实现Flutter 和 Web 的原生交互。

这个的想法不断的在脑海中回响不断，最终形成 Misty 的雏形。

思考

我们以 Vue 开发的角度来思考，如何把打包后的 dist 资源包在 Flutter 上本地运行起来，同时可以提供给 WebView 使用，并且良好的支持 Flutter 和 Web 原生交互（譬如手势、事件通知等）。

在 Flutter 中启动 Web 服务

此处借鉴了 local_server_webview

Web项目本地缓存和版本管理

• 把打包好的 dist 文件下载到本地。

Dio().download(queueItem.zipUrl, zipPath).then((resp) {if (resp.statusCode != 200) {_log('下载ls 压缩包失败err:${resp.statusCode} zipUrl:${queueItem.zipUrl}');throw Exception('下载ls 压缩包失败err:${resp.statusCode}');}return unarchive(queueItem, zipPath);
})