先运行下,看当前flutter 是否支持web项目, 如果没有enable-web: true 则输入 flutter config --enable-web
创新互联公司专注于企业成都全网营销、网站重做改版、澄城网站定制设计、自适应品牌网站建设、H5场景定制、商城网站制作、集团公司官网建设、外贸网站制作、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为澄城等各大城市提供网站开发制作服务。
这时候项目中就包含了web文件夹.
输入 flutter build web 就可以在build文件夹中生成web文件, 将它放到到tomcat或者其他容器就能访问了!
附上项目的测试连接:
参考:
常规操作,就是使用android studio编辑器,Flie--New--New Flutter Project
一路直接Next+Finish ,项目就创建成功了。
常规的运行到手机或者模拟器上就不说了,下面说下运行到web浏览器上。
如上图,选择最后一个是手机真机调试,选择Chome或者Edge都可以运行到web浏览器中,选择好后点击绿色运行按钮。
需要使用universal_html插件
universal_html是用来替代dart:html的,使用dart:html会有如下警告:
这是为了避免在Flutter Web插件包之外使用纯web库
导入:
选择文件并上传:
Flutter 2.5.1
在项目目录下,在终端运行以下命令:
Flutter 中文文档 - Flutter 中文资源 | 在 Web 中展示图片
在无法修改服务器配置的情况下可以使用html渲染。此外官方文档中建议,如果显示的图片较多,使用html渲染性能更好
webview只支持移动端,其它平台尝试打开网页
webview - web view for flutter web application - Stack Overflow
使用 package_info_plus | Flutter Package (pub.dev) 替换package_info
使用 --base-href ,可设置服务器子目录
flutter web有三种渲染模式,auto 、html 和 canvaskit。
flutter build web命令默认的渲染模式为auto,这种模式在移动端使用html渲染,在pc端使用canvaskit渲染。
目前我的flutter版本是2.5.2,pc端浏览器使用canvaskit渲染时中文会出现短暂的乱码(方块叉号),像这样:
我们可以指定渲染模式为html,就不会有这个问题了,命令如下:
指定渲染模式为canvaskit的命令为:
2021.10.21:flutter web对中文的支持貌似不太好,在手机浏览器调试web项目时,textfield hinttext有中文输入会有卡顿bug
Flutter的webview常用的第三方库有 flutter_webview_plugin 、 webview_flutter ,后者的文档较少,暂先学习flutter_webview_plugin。
添加依赖
导入包
iOS端info.plist配置,其中NSAppTransportSecurity节点是为了支持http协议
一个简单的demo
要监听链接跳转的话,实现onUrlChanged即可
添加依赖
导入包
iOS端info.plist配置
一个简单的demo
但是在webview里点击链接跳转的时候,测试机有时会跳转到系统浏览器上,并且点击文本框无法弹出键盘,交互性很弱。
二者共同的缺点是与javascript难以交互,目前只能实现Flutter-JS传递信息,还没找到可以进行完美交互的第三方库。并且一些常见的协议还不支持,比如拨号和调用摄像头等,期待后续完善。