Flutter 手机端项目转web运行部分问题记录-六虎

最近测验将平板程序编译成web运用发布，发布后程序能够运转，可是存在一些问题。现将问题和处理进程记录如下

web运用加载耗时问题

加载时会去www.gstaic.com下载/chromium/canvaskit.js文件和canvaskit.wasm文件，
加载时会去www.gstaic.com下载notosanssc字体文件和roboto字体

打包指令

我的打包指令为：

flutter build web -t lib/main.dart --no-tree-shake-icons  --release

处理下载字体的问题

将需求下载的资源文件预下载放入项目中

从对应的字体网址下载好roboto.ttf和notosanssc.otf
将字体文件放在项目中的资源文件中

在项目的ymal文件中加入Font声明

打包项目，打包后build文件如下

运转测验发现roboto.ttf文件现已能够从资源中下载，可是notosanssc.otf任然会从gstaic.com下载

处理notosanssc.otf依然需求下载的问题

修该ymal中Roboto字体的资源文件为notosanssc.otf

打包测验

不会再从gstaic中下载文件。这个办法不清楚原因，有知道原因的欢迎谈论指正

处理canvaskit.js文件和canvaskit.wasm问题

buil目录中发现存在canvaskit.js和canvaskit文件

修改–dart-define=FLUTTER_WEB_CANVASKIT_URL为：canvaskit/，即
- –dart-define=FLUTTER_WEB_CANVASKIT_URL=canvaskit/

此刻编译指令为：

flutter build web -t lib/main.dart --no-tree-shake-icons  --release --dart-define=FLUTTER_WEB_CANVASKIT_URL=canvaskit/

测验

chrome和safari加载时间不一致的问题
- canvaskit.wasm这个文件在chrome中需求耗时16s,在safari只是需求60ms
- chrome
- safari
- 这个问题也不清楚原因，暂时未处理

参考：我把FlutterWeb烘托模式改成Canvaskit后… – 掘金

web浏览器刷新，url会重置的问题

我的项目是一个插件项目，需求主程序经过url传入一个资源地址，然后插件项目读取地址栏的地址，去下载并加载对应文件。首要代码如下：

void main() async {
  String? assetsApi = Uri.base.queryParameters['assetsApi'];
  printDebug("wbeApp start assetsApi:$assetsApi");
  runApp(MyApp(interface: MyControl(assetsApi: assetsApi ?? "")));
}

Widget build(BuildContext context) {
  return GetMaterialApp(
    home: AppUI(
      interface: interface,
    ) ,
  );
}

此刻debug直接运转：http://localhost:51335/#/

修改地址运转：http://localhost:51335/?assetsApi=http://172.16.132.147:5000/api/roomConfig/downloadAppUIAssets?roomId=tAnHi86sRdsFbTzF4

此刻程序能够读取地址栏的url，并正确加载

可是加载完成后，无法记录我们输入的url地址栏url再次变为：http://localhost:51335/#/

处理办法

运用setUrlStrategy办法

import 'package:flutter_web_plugins/flutter_web_plugins.dart';
void main() async {
  String? assetsApi = Uri.base.queryParameters['assetsApi'];
  printDebug("wbeApp start assetsApi:$assetsApi");
  setUrlStrategy(PathUrlStrategy());
  runApp(MyApp(interface: MyControl(assetsApi: assetsApi ?? "")));
}

对app增加router

  Widget build(BuildContext context) {
    String basePath = Uri.base.path;
    debugPrint("basePath:$basePath");
    String router = "/?assetsApi=${interface.url}";
    debugPrint("router:$router");
    return GetMaterialApp(
      initialRoute: router,
      routes: {
        router: (_) {
          return AppUI(
            interface: interface,
          );
        }
      },
      onGenerateRoute: (settings) {
        debugPrint('onGenerateRoute name: ${settings.name}');
      },
      onUnknownRoute: (settings){
        debugPrint('onUnknownRoute name: ${settings.name}');
      },
      // home: AppUI(
      //   interface: interface,
      // ) ,
    );
  }
}

此刻从url加载完成程序后，地址栏不会重置，会记住上次的目录
initialRoute的值不知道怎么填写的时分，能够从onUnknownRoute或许onGenerateRoute中寻找

dart.io和dart:js

web项目中运用dart.io库中的API时会反常报错

非web项目无法运用dart:js的API时也会反常

那怎么在一个功能中经过渠道判别来运用不同的API呢

怎么在同一个项目中同时运用dart.io和dart.js两个库的

操作如下：

界说接口类abstract class，运用import if 来做头文件导入判别

import 'desktop_mobile.dart'
  if (dart.library.html) 'web.dart';
abstract class App{
  Future<Map> init();
  factory App() => getApp();
}

完成非web接口类

import 'dart:convert';
import 'package:flutter/services.dart';
import 'app.dart';
class MobileApp implements App {
  @override
  Future<Map> init() async {
    String data = await rootBundle.loadString("assets/project_json.json");
    Map jsonData = jsonDecode(data);
    return jsonData;
  }
}
App getApp() => MobileApp();

完成web接口类
- 从js传过来的json格式数据可能导致dart无法辨认，所以改为传jsonString

import 'dart:convert';
import 'package:flutter/services.dart';
import 'app.dart';
import 'dart:js' as js;
class WebApp implements App {
  @override
  Future<Map> init() async {
    String? jsonString = js.context["appConfig"];
    jsonString ??= await rootBundle.loadString("assets/project_json.json");
    return jsonDecode(jsonString);
  }
}
App getApp() => WebApp();

运用

import 'app/app.dart';
Map jsonData = await App().init();

runtimeType在web和手机端不同

web渠道下数据的runtimeType和非原生不一样，判别数据类型时最好用is关键字来判别

如：

dynamic values = json[key];
  if (values != null && values is Map) {
}

而不运用

      dynamic values = json[key];
      if (values != null && values.runtimeType.toString().contains("Map")) {
      }

以下是部分整理

macos渠道

// int
dynamic int1 = 1; // int
int int2 = 1; // int
// double
dynamic double1 = 1.0;  // double
double double2 = 1.0; // double
// number
dynamic num1 = 2; // int
dynamic num2 = 2.0; // double
num num3 = 2; // int
num num4 = 2.0; // double
// string
dynamic string1 = "1.0"; // String
String string2 = "1.0"; // String
// map
dynamic map1 = {"1":2};// _Map<String, int>
dynamic map2 = {"1":2,"2":"2"};// _Map<String, Object>
dynamic map3 = {"1":2,"2":"2",1:'2'};// _Map<Object, Object>
Map map4 = {"1":2}; // _Map<dynamic, dynamic>
Map<dynamic,dynamic> map5 = {"1":2}; // _Map<dynamic, dynamic>
Map<String,dynamic> map6 = {"1":2}; // _Map<String, dynamic>
Map<dynamic,String> map7 = {"1":"2"};// _Map<dynamic, String>
// list
dynamic list1 = [1,2];// List<int>
dynamic list2 = ["1",2];// List<Object>
dynamic list3 = [1,2,{}];// List<Object>
List list4 = [{"1":2},{"1":2,"2":"2"}];// List<dynamic>

web渠道

// int
dynamic int1 = 1; // int
int int2 = 1; // int
// double
dynamic double1 = 1.0;  // int
double double2 = 1.0; // int
// number
dynamic num1 = 2; // int
dynamic num2 = 2.0; // int
num num3 = 2; // int
num num4 = 2.0; // int
// string
dynamic string1 = "1.0"; // String
String string2 = "1.0"; // String
// map
dynamic map1 = {"1":2};// IdentityMap<String, int>
dynamic map2 = {"1":2,"2":"2"};// IdentityMap<String, Object>
dynamic map3 = {"1":2,"2":"2",1:'2'};// LinkedMap<Object, Object>
Map map4 = {"1":2}; // LinkedMap<dynamic, dynamic>
Map<dynamic,dynamic> map5 = {"1":2}; // LinkedMap<dynamic, dynamic>
Map<String,dynamic> map6 = {"1":2}; // IdentityMap<String, dynamic>
Map<dynamic,String> map7 = {"1":"2"};// LinkedMap<dynamic, String>
// list
dynamic list1 = [1,2];// List<int>
dynamic list2 = ["1",2];// List<Object>
dynamic list3 = [1,2,{}];// List<Object>
List list4 = [{"1":2},{"1":2,"2":"2"}];// List<dynamic>

Flutter web嵌入web项目

Flutter build的产品作为一个静态资源放在web项目中,web项目想调到flutter页面中，运用window.open函数

window.open(URL,name,specs,replace)

Flutter 手机端项目转web运行部分问题记录

web运用加载耗时问题

打包指令

处理下载字体的问题

将需求下载的资源文件预下载放入项目中

处理notosanssc.otf依然需求下载的问题

处理canvaskit.js文件和canvaskit.wasm问题

web浏览器刷新，url会重置的问题

dart.io和dart:js

怎么在同一个项目中同时运用dart.io和dart.js两个库的

runtimeType在web和手机端不同

macos渠道

web渠道

Flutter web嵌入web项目

相关文章

极简的成本实现Flutter静态资源多渠道定制

写了100多篇原创文章，我常用的在线工具网站推荐给大家！

可视化：RStudio 图形系统

【源码&库】Vue3的模板转换为AST的过程

作者信息