时间戳

首页 > 解决方案 > 在 Flutter Web 中从 JS 调用 Dart 方法

javascript - 在 Flutter Web 中从 JS 调用 Dart 方法

问题描述

对于 Webview 相关功能，我使用方法通道通过原生 Android 和 iOS 代码打开 Webview，并且我正在其中打开一个网站，我正在从 JS 回调到移动平台中的原生代码。对于 Android，我提供了一个从 JS 调用其方法的类，它看起来像这样：

webView.settings.javaScriptEnabled = true
webView.addJavascriptInterface(WebAppInterface(this), "nativeCommunicator")

webView.loadUrl("SOME_URL")

…

class WebAppInterface(private val mContext: Activity) {
  @JavascriptInterface
  fun postMessage(text: String) {
    println("WebAppInterface.message($text)")
    //send back to flutter
  }
}

这似乎是从 js 回调到我的代码的非常简单的方法。

现在我正在尝试在 Flutter Web 中执行此操作我通过调用打开了网站

import 'package:js/js.dart';
...
js.context.callMethod('open', 'SOME_URL', '_self');

效果很好，现在我正在尝试通过创建此类来获取回调

@JS()
library native_communicator;

import 'package:js/js.dart';
@JS('nativeCommunicator')
class NativeCommunicator{

 @JS('postMessage')
 external static set _postMessage(void Function(String text) f);


 @JS()
 external static void postMessage();

}

void setJSCallbackFunction(void Function(String text) postMessageFunction) {
 NativeCommunicator._postMessage = allowInterop(postMessageFunction);
}

我正在调用 setJSCallbackFunction 并将我的函数作为参数传递，但它一直给我运行时错误它找不到“postMessage”，我尝试了一些其他方法导致找不到“nativeCommunicator”错误，谁能指出怎么做这个权利？我需要从 js 调用一个 dart 方法。

标签： javascriptflutterflutter-web

解决方案

allowInterop我认为您正在从dart:js库中寻找功能： https ://api.flutter.dev/flutter/dart-js/dart-js-library.html

示例代码：

import 'dart:html';
import 'dart:js';
import 'package:js/js_util.dart';

String dartFunc(String str) {
  return 'Inside dartFunc: ' + str;
}

void main() {
  setProperty(window, 'dartFunc', allowInterop(dartFunc));
  runApp(MyApp());
}

推荐阅读