听说flutter 2.0后直接支持web端了, 意思就是不需要进行flutter channel变成master的,就可以体验web端, 怀着好奇心就开始了
1. 如果你的flutter版本还没有升级到2.0版本的话,请自行进行升级
flutter --version
flutter upgrade --force
2.创建一个新的flutter 项目
我这里创建一个叫flutter_app_web的项目;
如果小伙伴们已经安装过了chrome浏览器的话,如下图位置就可以看到多了一个Chrome(web)的选项,是不是很神奇!
选择Chrome(web)这个,然后把工程跑起来,就可以看到代码跑到web端喽.如下图
初步体验完成!!!
下面是打包web相关
1.我们稍微改动一下代码,把主题色由蓝色改为紫色! 如下图
细心的小伙伴可能会发现,安卓有android文件夹, iOS 有ios的文件夹,但目前目录结构是没有web文件夹的,如下图
2. 创建web文件夹
输入下面的命令创建web文件
flutter create .
然后就会创建一系列web相关的文件 ,如下图, 目录结构也会多一个web的文件夹. 如下图
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: 找不到打包完文件在哪里
如下图解决
坑2: 找到了index.html,用浏览器打开一片空白
这个属于正常的, 这个不像前端web ,html css js那套,点击index.html就能访问的. 在flutter里面是不能直接访问的,一定要放到容器里面去才能访问,如:tomcat等
坑3: 已经放到tomcat了,用浏览器打开还是一片空白
那是因为文件路径引用不对.解决办法有2种
方法1:
用编辑器打开index.html,能看到源文件,把<base href="/">,改成<base href="">
方法2:
用编辑器打开index.html,能看到源文件,把<base href="/">,改成你服务器的路径比喻说:<base href="http://192.168.1.80:3350/web/">
改完这个,再上传到服务器tomcat上,然后再来访问,相信就会正常了
我这边最后是这样的
结尾
今天的分享先到这里了,后续会分享更多的干货,欢迎点赞,加关注了,如下其他问题,欢迎留言喽~祝君好运!!
补充
有的小伙伴可能会说，我已经按照上面的步骤做了，但还是打不开，还是一片空白，是怎么回事啊！ 经过本人这边测试，低版本的IE浏览器 和 低版本的 Chrome浏览器是会出现这样的现象！这个时候，只需要把浏览器升级成最新的版本，就可以啦！！！祝君好运~
