flutter web 应用详解

1、创建支持web的应用

flutter支持地址

//创建新项目

flutter create myapp

//已有项目支持web

flutter create

//构建Web

flutter build web

2、创建APP壳工程

///(同上)


3、部署构建的web应用

//部署到本地测试 (一定要CD到构建的build-web路径)

python -m SimpleHTTPServer 9999

//浏览器打开检查否部署成功 注:加了jsbridge的代码之后会报找不到js方法,页面会打不开

http://127.0.0.1:9999/

```

4、运行APP项目

空安全是flutter2.0 Dart2.12中新增的一项特性,现在新的第三方库也基本支持了空安全,https://pub.flutter-io.cn/packages用的时候可以注意一下Null safety标识。

[了解空安全]

//目前老项目先忽略一下运行

flutter run --no-sound-null-safety


5、APP工程和web工程通信

通过对比了以下三个框架的评论和评分,暂时先选择了官方维护的webview_flutter。

考虑到后期方便迭代,APP工程尽量不涉及业务代码,整个页面直接嵌套webview展示,会有一些问题是:

1、全面屏的适配

Flutter里有个SafeArea,用这个包裹住webview就会自动处于安全区域范围内,SafeArea可以设置上下是否在安全区域内,默认true

2、应用SafeArea之后状态栏的颜色是由APP项目端改还是web项目端改


6、遇到的问题

1、wkwebview在iOS 15模拟器白屏

2、启动页白屏,可以在iOS、Android原生端设置启动页


7、打包

iOS端 Xcode 打开Runner.xcworkspace,正常打包,Android端还没试

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容