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端还没试