首页 » flutter » 正文

flutter移动端向web端移植碰到的问题

  1. 项目中使用的flutter1.7.8版本中还未将web端与移动端进行统一,所以将web端与移动端分为两个项目。
  2. Web端与移动端在package方面主要的差异有移动端使用Flutter的包,web端使用flutter_web包,移动端能够使用的dart:io包在web端使用不了,web有个io.dart用来替代dart:io,因为flutter对web的支持时间还比较短,其中的方法没有实现,如post和get方法返回的是null(图一),类方面,dart:io有的File等类,在io.dart没有,我将项目中的这些相关的代码注释掉了,其中要注意的是我们使用了HTTP Client来实现代理,这个类在web端功能不全,而web端可以电脑直接抓包,也就不需要这个东西。
  3. 在库的使用方面,首先是Sharedpreferences这些移动端专有的库使用不了,另一个就是库中导入了dart:io的库也是使用不了的,通过不了编译。而有些库中导入的是flutter,这种也是使用不了的,不过在使用provide库的时候,因为库只有一个文件,所以做了下尝试,将库的文件放入项目,将库导入的flutter包改为flutter_web,发现能够正常的使用,说明有些库拿下来改改还是能用的。
  4. 在网络方面,浏览器的跨域访问限制使得flutter生成的js代码在访问网络方面需要服务端支持跨域访问,开始使用的http库进行请求,因为没有带Header,浏览器访问服务器并未携带Access-Control-Request-Header的请求头,所以能够正常的访问网络,而如果请求带了Header,那么这个Header会被当成 Access-Control-Request-Header参数传给服务器(图二),服务器认为非法的跨域给挡掉了。
  5. 从flutter1.9开始,web端并入了主代码库,web端也是导入flutter包,那么provide修改flutter为flutter_web也就不需要了。通过运行flutter1.9的一个支持web的example(使用的Android 9的小米8se手机,chrome为76.0.3809.132正式版),我发现web确实相对移动端还有些问题,最大的一个是video_play在web端加载不出来视频,一直处于加载中的状态,chewie使用了video_play,也存在这个问题。在网络方面,dio开始支持web,调整了架构,发布了2.0的版本,2.0发现了问题,又重新调整,发布了3.0。dio用于项目需要处理跨域访问的问题,dio发送的请求,会设置Content-type的header,会被浏览器作为跨域访问的请求头发出去,从而被浏览器拦截。
  • 图一
    1572186359319

  • 图二
    1572186392036

赞 (0)

发表评论