HarmonyOS鸿蒙Next中flutter使用webview_flutter包,js如何和webview_flutter通讯

HarmonyOS鸿蒙Next中flutter使用webview_flutter包,js如何和webview_flutter通讯 flutter框架,使用webview_flutter包,js如何和webview_flutter通讯?

我已经知道webview_flutter的controller有addJavaScriptChannel方法可以监听js的方法调用,在鸿蒙中js该怎么调用到原生函数?

例如在Android中,webView首先注册方法A,js调用window.Android.methodA()即可调用到刚才注册的方法A原生函数。在iOS中,webView调用addScriptMessageHandler:name:方法注册函数A的名字,js调用window.webkit.messageHandlers[methodA].postMessage()即可调用到iOS的刚才注册的方法A原生函数。


更多关于HarmonyOS鸿蒙Next中flutter使用webview_flutter包,js如何和webview_flutter通讯的实战教程也可以访问 https://www.itying.com/category-92-b0.html

4 回复

鸿蒙中js与dart函数的调用,请参考如下demo:https://gitee.com/openharmony-sig/flutter_samples/tree/master/ohos/js_dart_demo

更多关于HarmonyOS鸿蒙Next中flutter使用webview_flutter包,js如何和webview_flutter通讯的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在鸿蒙 import { webview } from '@kit.ArkWeb'中 js如何和webview如何通信?IOS 中 [web addScriptMessageHandler:self name:@"eventName"];添加监听 ,代理方法 - (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message 即可拿到 message.name = 'eventName' 事件 ;有尝试使用// Web组件加载本地index.html页面 Web({ src: $rawfile(‘index.html’), controller: this.webviewController}) // 将对象注入到web端 .javaScriptProxy({ object: this.testObj, name: "testObjName", methodList: ["test","gettest1"], controller: this.webviewController }) } } ,加载的是压缩后的 .html,这个 testObjName一直找不到

在HarmonyOS鸿蒙Next中使用webview_flutter包时,JavaScript与WebView的通讯可以通过以下方式实现:

  1. JavaScript调用Flutter

    • 使用javascriptChannels在Flutter中注册JavaScript通道,允许JavaScript通过该通道调用Flutter方法。
    • 例如:
      WebViewController controller = WebViewController()
        ..setJavaScriptMode(JavaScriptMode.unrestricted)
        ..addJavaScriptChannel('FlutterChannel', onMessageReceived: (JavaScriptMessage message) {
          // 处理来自JavaScript的消息
        });
      
    • 在JavaScript中调用:
      FlutterChannel.postMessage('Hello from JavaScript');
      
  2. Flutter调用JavaScript

    • 使用runJavaScript方法在Flutter中执行JavaScript代码。
    • 例如:
      controller.runJavaScript('alert("Hello from Flutter")');
      
  3. 双向通讯

    • 结合上述两种方式,可以实现Flutter与JavaScript之间的双向通讯。
    • 例如,JavaScript发送消息到Flutter,Flutter处理后返回结果给JavaScript。
  4. 注意事项

    • 确保WebView的JavaScript支持已启用。
    • 处理消息时注意安全性,避免注入攻击。

通过以上方式,可以在HarmonyOS鸿蒙Next中实现webview_flutter与JavaScript的通讯。

在HarmonyOS鸿蒙Next中使用webview_flutter包时,可以通过JavaScript与Flutter进行通信。具体步骤如下:

  1. 启用JavaScript:在WebViewController中启用JavaScript支持。
  2. 注册JavaScript回调:使用JavaScriptChannel注册回调方法,Flutter可以通过此方法接收来自JavaScript的消息。
  3. 发送消息:在JavaScript中使用window.flutter_inappwebview.callHandler方法发送消息到Flutter。
  4. 处理消息:在Flutter中通过注册的JavaScriptChannel处理接收到的消息并执行相应操作。

这样即可实现JavaScript与webview_flutter的双向通信。

回到顶部