Flutter 网络托管应用程序无法识别外部功能

Question

我在 GitHub 页面上托管了一个在 Flutter 上制作的网站，我正在使用 Dart-JS interop 连接 Solana 钱包。当我在本地测试时，我可以连接到它并且工作正常，但是一旦我在 GitHub 页面上托管网络，我就会收到以下错误：Uncaught TypeError: p.isPhantomInstalled is not a function

这是我的 Dart 代码：

    @JS('walletModule.ClientWallet')
    class ClientWallet {
      external Future<void> connect();
      external void disconnect();
      external String get address;
      external Future<void> signTransaction();
      external bool isPhantomInstalled();
    }
    
    class WalletController extends GetxController {
    
      Future<void> connectWallet(context) async {
        ClientWallet wallet = ClientWallet();
        if (wallet.isPhantomInstalled()) {
          await promiseToFuture(wallet.connect());
          createSnackbar('success', 'Wallet Connected');
        } else {
          createSnackbar('error', 'No Phantom wallet detected');
        }
      }

这是我的JS代码：

class ClientWallet {

    constructor() {
        this.address = '';
    }

    async connect() {
        const resp = await window.solana.connect();
        this.address = resp.publicKey.toString();
    }

    address() {
        return this.address;
    }

    isPhantomInstalled() {
        return window.solana && window.solana.isPhantom;
    }

    disconnect() {
        window.solana.disconnect();
    }
}

var walletModule = { ClientWallet: ClientWallet };

似乎在托管时，该应用无法识别外部功能？我不知道为什么或如何解决它。

Answer 1

在阅读了您关于将 Phantom 钱包与 Flutter 连接的原始 post 之后，我决定自己尝试一下，最终运行遇到了与您相同的问题，具体功能打电话！

我的解决方案（解决方法）是使用独立函数而不是方法。

我不知道为什么，但出于某种原因，Dart-JS 互操作在 flutter build web 之后停止处理 class 个实例。我带有 class 个实例的缩小 JS 代码与 flutter run -d chrome.

配合得很好

编辑：

这是我开始工作的phantom.ts。

const solanaWeb3 = require('@solana/web3.js');

export async function connect(): solanaWeb3.PublicKey {
  const resp = await window.solana.connect();
  return new solanaWeb3.PublicKey(resp.publicKey.toString());
}

export function disconnect() {
  window.solana.disconnect();
}

export function isPhantomInstalled(): bool {
  return window.solana && window.solana.isPhantom;
}

export async function signTransaction(tx: solanaWeb3.Transaction): solanaWeb3.Transaction {
  return await window.solana.signTransaction(tx);
}

然后是 Dart 端，interop 是一样的，只是没有 class 定义。我将很快写一个 Medium post / 发布一个带有示例的 GitHub 回购协议。

编辑 2： Medium post / repo can be found here

Flutter 网络托管应用程序无法识别外部功能

Flutter web-hosted app doesn't recognize external functions

github-pages

dart-js-interop

flutter

flutter-web

solana