在 Flutter 中使用 JS 库

Question

我正在尝试在我的 Flutter 应用程序中使用 Ether JS。我知道它没有得到直接支持，甚至现有的实现也没有得到很好的记录。

有什么方法可以在我的 Android 和 iOS 的 Flutter 应用程序中使用这个库？也欢迎任何其他替代建议。

我尝试过js.dart，但不知道如何使用它。我什至不确定这是否是这种情况下的正确选择。

我也试过Flutter WebView Plugin。

plugin.evalJavascript(
    'function add(a,b){return a+b;}add(2,3);'
).then((s) {
    print(s);
}

此函数正确地返回 5 作为响应。但是我不明白如何像这样使用 EtherJS 库。

我是 Flutter、Dart 和 JS 的菜鸟。任何帮助将不胜感激。

Answer 1

我最终通过使用rmtmckenzie 在此answer 中建议的平台渠道解决了这个问题。

我下载了 JS 文件并将其分别保存到 Android 和 iOS 的 android/app/src/main/res/raw/ether.js 和 ios/runner/ether.js。

安装依赖项

安卓

将LiquidCore添加为应用级别build.gradle的依赖项

implementation 'com.github.LiquidPlayer:LiquidCore:0.5.0'

iOS

对于 iOS，我使用了 JavaScriptCore，它是 SDK 的一部分。

平台频道

在我的例子中，我需要创建一个基于我传入 JS 函数的助记符（查找 BIP39）的钱包。为此，我创建了一个平台通道，它将助记符（基本上是字符串类型）作为参数传递，完成后将返回一个 JSON 对象。

Future<dynamic> getWalletFromMnemonic({@required String mnemonic}) {
  return platform.invokeMethod('getWalletFromMnemonic', [mnemonic]);
}

Android 实现 (Java)

在MainActivity.java 中在这一行之后添加这个

GeneratedPluginRegistrant.registerWith(this);

String CHANNEL = "UNIQUE_CHANNEL_NAME";

new MethodChannel(getFlutterView(), CHANNEL).setMethodCallHandler(
    new MethodChannel.MethodCallHandler() {
        @Override
        public void onMethodCall(MethodCall methodCall, MethodChannel.Result result) {
            if (methodCall.method.equals("getWalletFromMnemonic")) {
                ArrayList<Object> args = (ArrayList<Object>) methodCall.arguments;
                String mnemonic = (String) args.get(0);

                JSObject walletFromMnemonic = getWalletFromMnemonic(mnemonic);
                if (walletFromMnemonic == null) {
                    result.error("Could not create", "Wallet generation failed", null);
                    return;
                }

                String privateKey = walletFromMnemonic.property("privateKey").toString();
                String address = walletFromMnemonic.property("address").toString();

                HashMap<String, String> map = new HashMap<>();
                map.put("privateKey", privateKey);
                map.put("address", address);

                JSONObject obj = new JSONObject(map);

                result.success(obj.toString());

            } else {
                result.notImplemented();
            }
        }
    }
);

声明以下方法，这些方法执行与 JS 库交互并将结果返回到平台通道的实际操作。

@Nullable
@VisibleForTesting
private JSObject getWalletFromMnemonic(String mnemonic) {
    JSContext jsContext = getJsContext(getEther());
    JSObject wallet = getWalletObject(jsContext);

    if (wallet == null) {
        return null;
    }

    if (!wallet.hasProperty("fromMnemonic")) {
        return null;
    }

    JSFunction walletFunction = wallet.property("fromMnemonic").toObject().toFunction();
    return walletFunction.call(null, mnemonic).toObject();
}

@Nullable
@VisibleForTesting
private JSObject getWalletObject(JSContext context) {
    JSObject jsEthers = context.property("ethers").toObject();
    if (jsEthers.hasProperty("Wallet")) {
        return jsEthers.property("Wallet").toObject();
    }
    return null;
}

@VisibleForTesting
String getEther() {
    String s = "";
    InputStream is = getResources().openRawResource(R.raw.ether);
    try {
        s = IOUtils.toString(is);
    } catch (IOException e) {
        s = null;
        e.printStackTrace();
    } finally {
        IOUtils.closeQuietly(is);
    }
    return s;
}

@VisibleForTesting
JSContext getJsContext(String code) {
    JSContext context = new JSContext();
    context.evaluateScript(code);
    return context;
}

iOS 实现 (Swift)

在override application 方法内的AppDelegate.swift 中添加以下行。

final let methodChannelName: String = "UNIQUE_CHANNEL_NAME"
let controller: FlutterViewController = window?.rootViewController as! FlutterViewController
let methodChannel = FlutterMethodChannel.init(name: methodChannelName, binaryMessenger: controller)

methodChannel.setMethodCallHandler({
    (call: FlutterMethodCall, result: FlutterResult)-> Void in
    if call.method == "getWalletFromMnemonic" {
        guard let mnemonic = call.arguments as? [String] else {
            return
        }

        if let wallet = self.getWalletFromMnemonic(mnemonic: mnemonic[0]) {
            result(wallet)
        } else {
            result("Invalid")
        }
    }
})

添加与 JavaScriptCore 交互的逻辑。

private func getWalletFromMnemonic(mnemonic: String) -> Dictionary<String, String>? {
    let PRIVATE_KEY = "privateKey"
    let ADDRESS = "address"

    guard let jsContext = self.initialiseJS(jsFileName: "ether") else { return nil }
    guard let etherObject = jsContext.objectForKeyedSubscript("ethers") else { return nil }
    guard let walletObject = etherObject.objectForKeyedSubscript("Wallet") else { return nil }


    guard let walletFromMnemonicObject = walletObject.objectForKeyedSubscript("fromMnemonic") else {
        return nil
    }

    guard let wallet = walletFromMnemonicObject.call(withArguments: [mnemonic]) else { return nil }
    guard let privateKey = wallet.forProperty(PRIVATE_KEY)?.toString() else { return nil }
    guard let address = wallet.forProperty(ADDRESS)?.toString() else { return nil }

    var walletDictionary = Dictionary<String, String>()
    walletDictionary[ADDRESS] = address
    walletDictionary[PRIVATE_KEY] = privateKey

    return walletDictionary
}

private func initialiseJS(jsFileName: String) -> JSContext? {
    let jsContext = JSContext()
    guard let jsSourcePath = Bundle.main.path(forResource: jsFileName, ofType: "js") else {
        return nil
    }
    do {
        let jsSourceContents = try String(contentsOfFile: jsSourcePath)
        jsContext!.evaluateScript(jsSourceContents)
        return jsContext!
    } catch {
        print(error.localizedDescription)
    }
    return nil
}

Answer 2

老实说，如果您是 Flutter、Dart 和 JS 的新手，除非您愿意投入大量时间，否则您会遇到一些麻烦。它确实取决于你想用 Ether JS 库做什么，但一般来说，你很难将它与颤振集成。有一个Ethereum package，但它的范围似乎比你一直在看的 ether.js 库要窄得多——它似乎主要集中在与 RPC api 的通信而不是处理钱包等。

如果你死心塌地使用 Flutter，最好的办法是使用 Android 和 iOS 特定的库来做实际的以太坊工作，并通过 Platform Channels 与你的 dart 代码中的公共 api 进行通信.这可能是一项重大任务，具体取决于您需要公开多少 API，尤其是对于刚接触 flutter/dart 以及可能还接触 android/ios 开发的人。这将比在 webview 中运行的 javascript 来回通信性能要高得多，而且实际上可能也更容易编码，因为 Flutter 目前并没有任何好的机制来调用 js 代码。

还有另一种选择 - 完全使用不同的客户端 UI 框架。 React native 可能会做你需要的一切，并且具有使用 Javascript 的优势，因此它很可能很容易集成 Ether.js 库，尽管我不能保证它实际上会完全支持 ether.js 库（它的运行时可能例如，没有必要的加密扩展）。

Answer 3

    Future<String> loadJS(String name) async {
  var givenJS = rootBundle.loadString('assets/$name.js');
  return givenJS.then((String js) {
    flutterWebViewPlugin.onStateChanged.listen((viewState) async {
      if (viewState.type == WebViewState.finishLoad) {
        flutterWebViewPlugin.evalJavascript(js);
      }
    });
  });
}