Flutter For Web 已经发布一年多时间，他的发布意味着我们可以真正地使用一套代码、一套资源部署大前端。在这里希望和大家分享下实践过程和踩坑实例，欢迎一起交流探讨。
01 Flutter For Web简介
什么是Flutter
Flutter 是 Google 开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台。
Flutter重写一套跨平台的UI框架，引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性。
其他跨平台解决方案
Flutter
Flutter For Web
Flutter For Web想在单代码库的情况下，使Flutter应用拥有Web支持。
Flutter应用可以被部署到任意的Web服务器上，或嵌入到浏览器中，而不需要特殊的浏览器插件支持。
Flutter for Web架构
Flutter for Mobile架构
Flutter For Web的绘制
开发过程
1.配置开发环境
$ flutter channel beta
$ flutter upgrade
$ flutter config --enable-web
2.创建应用
$ flutter create myapp
$ cd myapp
3.编译
$ flutter build web
- 老项目增加对flutter web的支持
$ flutter create .
代码结构
代码结构：
lib
写 dart 代码的主要区域
web
web工程的主目录了，包含 index.html 文件。但是如果你需要有资源文件、js 文件等 web 所需资源，也可以放到这个文件夹。
main.dart.js
dart文件转化为js，会在编译后的build文件夹中看到
Flutter For Web 工程目录结构
编译后的产物：
assets 资源相关文件
index.html web工程的入口
main.dart.js dart代码编译后的文件
编译后的产物
开发中存在的问题
库
Dart库的平台差异
-
有部分库在Flutter web中不支持
如：dart.io无法在web中使用，dart.io支持非web应用程序的文件、套接字、HTTP 和其他 I/O 操作。 -
有部分库只支持Flutter web中使用
dart:html html 相关的操作，如 document、ua、cookie 等等dart:js dart 和 JS 进行交互，可以给 js 方法传参，甚至还可以将 js 的参数带回等等
3.解决方案--条件引用
import ‘httpReuqest-stub.dart’
if (dart.library.io) ‘httpReuqest-mobile.dart’
if (dart.library.html) 'httpReuqest-web.dart’;
与客户端开发的区别
支持Flutter web的第三方库相对较少
只支持iOS和Android的第三方库
Flutter web中的Cookie管理
Flutter web中的cookie实际上是由浏览器来管理的，因此无法像客户端开发一样，自由的设置cookie
跨域访问
一个web页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。
因此，与客户端不同，web原则上只能请求本域名的网络接口，除非该接口设置可以接受跨域访问。
性能
1.Flutter For Web 目前也是单页面应用。
编译后main.dart.js 轻松过 1M，导致首次加载时长可能过慢，比如 canvas 绘制可能会导致性能问题。
-
PC 端首次加载的速度略慢，而手机端会有超过 2S 的延迟。
复杂列表滑动的时候帧率也只有十几，所以这里还有待官方后面对性能进行优化。
总结
Flutter For Web的优缺点总结
展望
1.对不同浏览器的支持
chrome、safari、firefox、ie/edge
image.png
2.性能的优化
js大小
渲染效率
3.生态的完善
第三方库的支持
网友评论