如何将 Dart Future 转换为 flutter webview 的 Javascript Promise

Question

我使用了 webview_flutter 来加载我的网站 url，并使用 JavaScriptChannel 进行 javascript 和 dart 之间的双向通信，因为我想要一些从 Android/IOS 平台到 javascript 的本机结果。

在颤振中

controller = WebViewController()
  ..setJavaScriptMode(JavaScriptMode.unrestricted)
  ..addJavaScriptChannel('FlutterChannel',
      onMessageReceived: (JavaScriptMessage message) async {
    
        //Here i am doing some operation and returning a result as
        controller.runJavaScriptReturningResult('window.function($result)');
    
  })
  ..loadRequest(
    Uri.parse(
        'https://demo.com/')
  );

在JavaScript中与flutter通道交互-

var params = {'key':'alternate_preference','value': ''}; 
var data = { plugin: 'SharedPref', method: 'fetch', params: [params] };
FlutterChannel.postMessage(JSON.stringify(data))

在 javascript 中捕获结果-

function flutterResponseFunc(flutterResult) {
   console.log(flutterResult);
}
window.function= flutterResponseFunc;

如何在 FlutterChannel.postMessage 本身的回调中捕获结果，而不是在 js 中为结果创建不同的函数。就像 javascript 中的 Promise.then 函数一样。

我已经浏览了这个答案

但它似乎是特定于平台的（即仅适用于 Web 平台），因为我无法在 Android/IOS 平台上使用 dart:js_interop 和 dart:html 库。任何帮助将不胜感激。谢谢！！

Answer 1

您不需要在语言之间翻译该功能。您可以使用 json 在两种语言之间进行通信。并且可以通过flutter运行简单的代码。我留下了一个我自己使用的例子，以便于理解。

..addJavaScriptChannel(
    'consolePrint',
    onMessageReceived: (value) {
      final fileName = DateTime.now().toString().replaceAll(':', '-');
      final Map linkList = jsonDecode(value.message.toString());

      int totalCalculate(Map returnValue) {
        if (returnValue.containsValue(null)) {
          returnValue.removeWhere((key, value) => value == null);
          return returnValue.length;
        }
        return returnValue.length;
      }

      ProgressBar.total = 0;
      ProgressBar.progressValue.value = 0;
      ProgressBar.total = totalCalculate(linkList);
      linkList.forEach((key, value) {
        if (value != null) {
          downloadJpg(
              index: int.parse(key),
              url: value,
              fileNmae: fileName,
              total: linkList.length);
        }
      });
    },
  );

从 flutter 运行并创建一个函数。然后将结果返回到通道。 consolePrint 是我的频道名称

void getLinkMap(WebViewController controller) async {
  try {
    await controller.runJavaScript('''
                  function getImages() {
                    var json = {};
                    var liList = document.querySelectorAll("body > div.main-content > div.ng-scope > div.content > div:nth-child(3) > div.modal-content.mega-image > section > ul > li")
                    liList.forEach(function list(value, index) {
                      var img = value.querySelector('img');
                      var hdImage = img.getAttribute("hd-image");
                      json[index] = hdImage;
                    });
                    consolePrint.postMessage(JSON.stringify(json));
                  };
                  window.onload = getImages();
              ''');
  } catch (e) {
    log('error code: $e',
        time: DateTime.now(), name: 'func:getLinkMap');
  }
}