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时就会出现以下问题：
是因为
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的更新，看看未来会不会有更好的支持。
