1.前言

上一篇文章《Flutter Web从0到部署上线的实践》https://www.jianshu.com/p/e610239e7e9c讲述了我们如何使用Flutter进行web开发，并最终打包上线的流程。本文将针对实际项目中遇到的一些问题进行说明。包含如下几个问题：

Dart中int和JS中Number的转换问题。
导入特定平台依赖项。
路由问题。

接下来我会针对这几个问题一一进行说明。

2.Dart中int和JS中Number的转换

由于我们的项目是将一个线上的Flutter的App项目直接打包成web版，在运行的时候发现，我们发送的请求时常返回错误的数据，比如说：

我们请求了一个feed列表，然后点击某一个item进入详情页。

这时候列表都能正常的展示，但进入详情页服务端会报错：

不存在这个feed。

通过跟服务端同学的沟通发现，出错的原因是在进入详情页请求feed详情时带的id错了。
这怎么会？？？id都是列表接口给的，web端也不会做任何处理进详情页直接带过去，而且线上App都是好好的也没有bug啊。
经过排查发现，id定义的是int类型，在Dart中，只有int和double这两种表达数字的数据类型，其中int的取值范围是-2^63 ～ 2^63 - 1，可以同等于Java中的Long。
在打包成web版式，Dart中的int会被编译成JS中的Number，问题就出在这儿了。Number的取值范围是-2^53 ～ 2^53 - 1。很不幸，我们模型中一些的id的取值范围大于2^53 - 1，从而转换成JS的Number后出错了。
原因找出来了，解决方法也显而易见了：
这种可能会超出JS取值范围的字段，需要改成String类型。
修改完后，这个问题顺利解决。

2.导入特定平台依赖项

在使用Flutter进行web端开发的时候，我们会经常使用dart:html这个库来实现一些功能。在仅仅打包web端时没问题，但由于我们的项目是跨平台的，打包App时就会出现以下问题：

截屏2023-08-04 11.49.51.png

是因为dart:html这个库只在web环境下能找得到，而编译App时并没有这个包，那也就意味着我们只能在web打包时使用dart:html这个库。解决方法如下：

import 'dart:html' if (dart.library.io) 'io_platform.dart' as platform;

在import的时候需要区分平台，dart.library.io意味着是在非web环境下（dart:io不支持web）。所以在非web环境下我们import的是io_platform.dart这个文件。这时候我们有个疑问，非web环境下不引入dart:html不就好了么？为什么要引入另一个文件呢？原因是因为编译的时候还是会找相应的方法，我们没有引入任何库，导致相应的代码编译不过，所以我们自己创建了一个io_platform.dart文件，去实现相应的接口。当然由于这些方法不会被调用到，其实只是个空实现。
比方说我们现在用到了dart:html以下的方法和变量：

platform.window.navigator.userAgent; //navigator.userAgent
platform.window.location.origin; //location.origin
platform.window.location.href; //location.href
platform.window.open(url, ""); //open(String, String)

于是我们的io_platform.dart是这么实现的：

IoPlatformWindow get window => IoPlatformWindow();

class IoPlatformWindow {
  IoNavigator navigator = IoNavigator();
  IoLocation location = IoLocation();

  open(String url, String name) {}
}

class IoNavigator {
  String userAgent = "";
}

class IoLocation {
  String origin = "";
  String href = "";
}

实际上只是为了解决编译的问题。如果大家有更好的方式解决这个问题请给我留言哈。
最后我们再来看路由问题。

3.路由问题

我们知道常规web端开发时，进行页面跳转传参是靠在url上拼参数，如：

YOUR_HOST_NAME/PATH?feedId=123

但显然Flutter并不是这么传参的。比方说我们进入一个详情页，那么它的路由就是：YOUR_HOST_NAME/#detailPage，而参数并不可见。这样的话在我们刷新页面的时候，也拿不到参数自然会出现问题。
解决方法呢，比如说可以在LocalStorage里记录参数信息，然后做一个工具类去记录路由栈。但这也有问题，因为我们可以复制任意链接分享给别人，那么别人打开的时候本地没有记录自然也就无法正常打开页面。这种情况下甚至无法引导用户去首页。既然如此，那我们干脆处理成用户在刷新的时候，重新将网页指定到首页url。

  void register() {
    if (platform.window.location.href !=
        platform.window.location.origin + "/" &&
        platform.window.location.href !=
            platform.window.location.origin + "/#/") {
      platform.window.location.href = platform.window.location.origin + "/";
    }
  }

在发现网页url不是首页的情况下，强制将href处理到首页。
然后在runApp(const MyApp());的MyApp控件的initState()方法中调用register()。当然这一定不是最好的方法，但考虑到目前的状况，这样处理是最合适的。如果大家有别的处理方式也欢迎分享给我。

4.总结

Flutter Web确实还没那么完美，之前很多文章分享的延迟组件分包以减小main.dart.js大小的方式貌似也不可用了（官网明确说明是给Android的AAB来使用的）。但有总比没有强，毕竟重新开发一个web版的App功能也挺大的，目前继续等着Flutter的更新，看看未来会不会有更好的支持。

Flutter Web避坑指南