开启web端构建
使用下面这个命令才可以开启Web端构建的支持
flutter config --enable-web
开启后我们再次输入flutter config可以看到
创建新项目
这样每次新建Flutter项目时,都是支持web端构建的,会默认多出一个构建配置目录web
。
即使某个项目不需要支持web端构建也无须去特意关掉这个支持,不使用构建web的命令即可
旧项目开启web支持
其实就是对当前项目重新配置一下
flutter create .
调试web端
在没有其他端环境可用的情况下,使用以下命令会直接编译web端并打开chrome进行调试
flutter run
编译发行Web端
Flutter在构建web端应用时,可以选择两种渲染模式。下面给大家演示下,大家注意仔细看看截图中我标记了红框的部分。
HTML渲染模式
flutter build web --web-renderer html
当我们采用html渲染模式时,flutter会采用HTML的custom element,CSS,Canvas和SVG来渲染UI元素
优点:
- 应用体积更小
缺点:
- 渲染性能差
- 跨端一致性可能受影响
CanvasKit渲染模式
flutter build web --web-renderer canvaskit
当我们采用canvaskit渲染模式时,flutter将 Skia 编译成 WebAssembly 格式,并使用 WebGL 渲染。应用在移动和桌面端保持一致,有更好的性能,以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。
优点:
- 像素级跨端一致性
- 更好的渲染性能
缺点:
- 应用体积变大,需要加载一个2.5MB的
webaseembly
格式的代码
还有一个auto的渲染模式(默认),会自动根据是运行在移动浏览器端还是桌面浏览器端来选择渲染模式
结论
随着Flutter2.0的发布,这个带着【全平台像素级跨端一致性的】框架会更加倍受关注。
虽然Web端的编译结果无论哪种渲染方式暂时在国内的web体验标准下都还差点意思,但是真的很值得期待。