Flutter_Flutter与JS相互调用

原创已于 2023-06-29 10:20:28 修改 · 2.6k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#flutter #javascript

于 2023-06-29 10:19:25 首次发布

Flutter 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了如何在Flutter中使用WebView插件，包括导入、配置和调用WebView。同时，详细讲解了Flutter与JS之间的互相调用，如设置JavascriptChannel以实现JS调用Flutter方法，以及Flutter调用JS函数的示例代码。此外，还提供了JS代码片段作为交互的例子。

WebView插件的使用

导入插件

webview_flutter: ^4.2.2

插件调用

import 'package:webview_flutter/webview_flutter.dart';

WebView配置

  WebViewController _controller;

WebView(
   initialUrl: "https://xxxxx",
   onWebViewCreated: (controller) {
     _controller = controller;
   },
   javascriptMode: JavascriptMode.unrestricted,
   javascriptChannels: jsCallNativeChannel(),
   gestureNavigationEnabled: true,
)

JS调用Flutter方法

Set<JavascriptChannel> jsCallNativeChannel() {
    return <JavascriptChannel>{
      JavascriptChannel(name: "funcName1", onMessageReceived: funcNameImplement1),
      JavascriptChannel(name: "funcName2", onMessageReceived: funcNameImplement2),
    };
 }

void funcNameImplement1(JavascriptMessage message) {
   debugPrint("接收到的数据${message.message}");
}
void funcNameImplement2(JavascriptMessage message) {
   debugPrint("接收到的数据${message.message}");
}

Flutter调用JS方法

// json数据格式化
import 'dart:convert';

String funcName = "JSFunctionName";
String dataJson = json.encode({"code": 200, "data": "sendToJsData"});
String javaScript = "$funcName('$dataJson')";
// 无返回值调用
_controller.runJavaScript(javaScript);
// 有返回值的调用
_controller.runJavaScriptReturningResult(javaScript).then((value) {});

JS代码示例

<!DOCTYPE html>
<html>
<title>交互</title>
<head>
    <meta charset="UTF-8">
</head>

<body>
<div style="margin-top: 20px">
    <h2 id="aaaa">JS与Flutter交互</h2>
    <input type="button" value="唤起本地方法" id="dsadadd" onclick="toFlutter('toFlutterData')" >
</div>
<script>
        function toFlutter(data){
            window.webkit.messageHandlers.funcName1.postMessage(JSON.stringify({ operation: data }))
        }
        window['JSFunctionName'] = (data) => {
        	document.getElementById('aaaa').innerHTML=data
        }
    </script>
</body>

</html>