flutter web遇到的坑

第一次用flutter 開發web，遇到不少坑：

1.圖片問題：Image.memory來加載圖片會報錯，估計是html5原生控件沒有使用memory創建圖片的接口吧。

2.WebAssembly使用有點復雜，c++的socket跟多線程在谷歌瀏覽器上不能使用的，只能用websocket。

3.使用vscode熱更時間比較久，應該是dart轉js，再同步到瀏覽器的過程太長。

4.文件不能本地緩存，只能通過下載。

5.每次運行都會再C:\Users\admin\AppData\Local\Temp目錄下創建flutter_tools文件夾，並且關閉運行是不會刪除，一直占用c盤空間

6.flutter web的運行原理是將dart語言轉成js運行，js中並不支持int64數據類型。

7.因為js不支持int64，所以ByteData類的字節操作

getInt64和setInt64調用都會提示不支持，但是可以將int類型拆成高低各4個字節的int來寫入或讀取ByteData:

int readInt64([Endian endian]) {
    // bool res = _init(8);
    // if (!res) return 0;

    // final value = _data.getInt64(_offset, endian ?? this.endian);//js中不能使用getInt64
    // _offset += 8;
    // return value;

    int iLow = readInt32();
    int iHigh = readInt32();

    int value = iHigh >> 32;
    value |= iLow;
    return value;
  }

void writeInt64(int value, [Endian endian]) {
    // _init(8);
    // _data.setFloat64(_offset, value.toDouble(), endian ?? this.endian);js中不能使用setInt64
    // _offset += 8;

    writeInt32(value);
    int iHigh = value >> 32;
    writeInt32(iHigh);
  }

以上方法只針對常用的小端格式寫入，大端格式可以仿照。

 

 8.開發過程http訪問有跨域問題，需要本地搭建代理服務器。

我的代理服務器使用dart開發：

const String LocalHost = 'localhost';
 
Future main() async {
  Cors.url.forEach((url, port){
     var server =  shelf_io.serve(
      proxyHandler(url),//url是代理的鏈接
      LocalHost,
      port,//port是開啟的代理端口
    );

    server.then((value){
          // 添加上跨域的這幾個header
      value.defaultResponseHeaders.add('Access-Control-Allow-Origin', '*');
      value.defaultResponseHeaders.add('Access-Control-Allow-Credentials', true);

      print('Serving at ${url} => port: ${port}');
    });
  });
 
}

 轉載請注明出處，from 博客園HemJohn