Flutter新版本 Web App 尝鲜

4,171 阅读3分钟

随着Flutter的快速发展,现在Flutter生态也日渐壮大,偶然打开Flutter官方文档发现已经支持了Web开发,于是便前去探探路,给大家分享点干货。

准备工作

首先我们这里以默认Flutter创建的项目为例,也就是New一个Flutter Project,有的同学会发现目录下并没有Web这个目录,所以在参考官网进行flutter run -d chrome命令的时候是无效的。

第一步先检查当前的Flutter 分支是否处在master上面。执行命令

flutter channel 

如果在master分支上Terminal内会打印如下。

flutter channels:
  beta
  dev
* master
  stable

如果没在master分支上则切换至master上.

flutter channel master

随后对Flutter的SDK进行更新,执行如下命令。至此我们的SDK就具备构建Web的能力了。

flutter upgrade

构建Web项目

更新完SDK的同学们肯定都想跃跃欲试,遂照着官网敲下flutter run -d chrome,随后发现SDK报错~此处还是埋了一坑,其原因是SDK没有启用Web工具构建项目,目前Web开发还处于发育阶段。执行如下命令启用项目。

flutter config --enable-web

然后再执行

flutter create .

当你看到Flutter在终端给你的彩蛋就说明已经搭建成功了,并且会告诉你现在Web工具处于试错阶段,生产环境还是要慎用。此时你会发现你的项目存在了一个Web的目录。

Debug And Release

执行完上述命令过后我们就可以使用Chrome来调试我们的页面了,在Android Studio中设备选择会多了几个选项

选择Chrome(web)会直接运行在Chrome浏览器上,当选择Server(web)的时候会在终端输出一个地址如http://localhost:54125/将地址输入到浏览器中即可访问。也可用过命令工具进行Debug

flutter run -d chrome 

Android Studio默认会使用dhttpd来搭建HTTP服务,关于dhttpd我就不过多赘述,官方文档有详细的描述,实际上类似于python -m SimpleHTTPServer 80

当我们尝试发布的时候,先对Web项目进行构建,在项目根目录下执行

flutter build web

在build目录下产生对应的文件,结构如下。

/build/web
  assets
    AssetManifest.json
    FontManifest.json
    LICENSE
    fonts
      MaterialIcons-Regular.ttf
      <other font files>
    <image files>
  index.html
  main.dart.js
  main.dart.js.map

在打包的时候则需将build目录整体打包,去除iosandroid目录,上传到服务器即可。

随后在服务器下对其进行解压,CD/build/web目录下开启Http服务,别人就可以看到你的网站啦,官网的例子是dhttppython,我试用Nginx也完全没有问题。

如果想使用本地服务调试,也可以CD/build/web执行

flutter pub global run dhttpd

端口默认是8080,在浏览器中输入localhost:8080即可查看页面。 没有dhttpd话用pub安装一下即可。

总结

Flutter的进展可以看出Google在跨平台上下的决心,一份代码现在可以产出三端,不过我个人觉得一个项目有了IOSAndroid两端后,没人会去用Web App吧,而且我觉得页面初始化加载速率略慢。不过对于我们客户端的同学来说没事还能写写网页还是不错的了。