flutter 2.0 web体验及web打包遇到的坑

时间:2021-7-9 作者:qvyue

听说flutter 2.0后直接支持web端了, 意思就是不需要进行flutter channel变成master的,就可以体验web端, 怀着好奇心就开始了

1. 如果你的flutter版本还没有升级到2.0版本的话,请自行进行升级
flutter 2.0 web体验及web打包遇到的坑
image.png
flutter --version

flutter upgrade --force
2.创建一个新的flutter 项目
flutter 2.0 web体验及web打包遇到的坑
image.png

我这里创建一个叫flutter_app_web的项目;

如果小伙伴们已经安装过了chrome浏览器的话,如下图位置就可以看到多了一个Chrome(web)的选项,是不是很神奇!

flutter 2.0 web体验及web打包遇到的坑
image.png
选择Chrome(web)这个,然后把工程跑起来,就可以看到代码跑到web端喽.如下图
flutter 2.0 web体验及web打包遇到的坑
image.png

初步体验完成!!!

下面是打包web相关

1.我们稍微改动一下代码,把主题色由蓝色改为紫色! 如下图
flutter 2.0 web体验及web打包遇到的坑
image.png

细心的小伙伴可能会发现,安卓有android文件夹, iOS 有ios的文件夹,但目前目录结构是没有web文件夹的,如下图

flutter 2.0 web体验及web打包遇到的坑
image.png
2. 创建web文件夹

输入下面的命令创建web文件

flutter create .

然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图

flutter 2.0 web体验及web打包遇到的坑
image.png
3. 打包web版本

我们知道要给android手机用,需要打包apk出来, 要给iPhone手机用,需要打包ipa出来;同样的道理要给浏览器用,也需要打包web相关代码.

flutter build web --web-renderer html

flutter build web 

flutter build web --web-renderer canvaskit

经过测试,上面三种方式都可以打包web版本, 其中第一种是针对移动端的打包方式, 第二种是一般的打包方式, 第三种是针对pc端的打包方式.

那这3种方式打包出来,运行起来有什么不同呢

flutter build web –web-renderer html 打开速度最快,兼容性好(是指ie,chrome,safari等浏览器兼容)

flutter build web 打开速度一般,兼容性好

flutter build web –web-renderer canvaskit 打开速度最慢,兼容性好

结论
就是使用第一种打包方式会比较好

flutter build web --web-renderer html

打包过程中遇到的坑

坑1: 找不到打包完文件在哪里

如下图解决

flutter 2.0 web体验及web打包遇到的坑
image.png
坑2: 找到了index.html,用浏览器打开一片空白

这个属于正常的, 这个不像前端web ,html css js那套,点击index.html就能访问的. 在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等

坑3: 已经放到tomcat了,用浏览器打开还是一片空白

那是因为文件路径引用不对.解决办法有2种
方法1:
用编辑器打开index.html,能看到源文件,把,改成

方法2:
用编辑器打开index.html,能看到源文件,把,改成你服务器的路径比喻说:

flutter 2.0 web体验及web打包遇到的坑
image.png

改完这个,再上传到服务器tomcat上,然后再来访问,相信就会正常了

我这边最后是这样的

flutter 2.0 web体验及web打包遇到的坑
image.png

结尾

今天的分享先到这里了,后续会分享更多的干货,欢迎点赞,加关注了,如下其他问题,欢迎留言喽~祝君好运!!

补充

有的小伙伴可能会说,我已经按照上面的步骤做了,但还是打不开,还是一片空白,是怎么回事啊! 经过本人这边测试,低版本的IE浏览器低版本的 Chrome浏览器是会出现这样的现象!这个时候,只需要把浏览器升级成最新的版本,就可以啦!!!祝君好运~

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎发送邮件至:qvyue@qq.com 进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。