在企业级应用开发中，如何通过Flutter实现稳定可靠的拨打电话功能？

在Flutter应用中集成WebView时，如何实现JavaScript与Dart之间的双向通信？具体场景是：WebView加载的网页需要调用Dart方法处理数据（如获取本地用户信息），同时Dart也需要主动触发网页中的JavaScript函数（如修改页面样式）。目前尝试使用webview_flutter插件，但对以下细节不太清楚：

  1. JavaScript调用Dart的准确方法（是否必须使用官方推荐的postMessage？能否用自定义协议？）
  2. Dart调用JavaScript时，如何确保WebView已加载完成再执行？
  3. 双向通信时如何处理异步操作（比如Dart端需要等待网络请求结果再回调JS）
  4. 有没有完整的交互示例代码，包含错误处理场景？

遇到的实际问题是：当快速连续触发通信时，偶尔会出现消息丢失或WebView崩溃的情况，该如何优化？


更多关于在企业级应用开发中，如何通过Flutter实现稳定可靠的拨打电话功能？的实战教程也可以访问 https://www.itying.com/category-92-b0.html

3 回复

以下是一个简单的 Flutter WebView 中 JavaScript 与 Dart 交互的实例：

  1. 创建一个 Flutter 项目并添加 webview_flutter 依赖。
  2. 在 Dart 中加载 HTML，并定义一个 JavaScript 函数调用 Dart：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class MyWebView extends StatefulWidget {
  @override
  _MyWebViewState createState() => _MyWebViewState();
}

class _MyWebViewState extends State<MyWebView> {
  late WebViewController _controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("WebView JS交互"),
      ),
      body: WebView(
        initialUrl: Uri.dataFromString('''
          <html>
            <body>
              <button onclick="callDartFunction()">Call Dart</button>
              <script>
                window.flutter_inappwebview.callHandler('test', (data) => console.log(data));
              </script>
            </body>
          </html>
        ''', mimeType: 'text/html').toString(),
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _controller.runJavascript("""
            function callDartFunction() {
              window.flutter_inappwebview.invokeHandler('test', "来自JavaScript的数据");
            }
          """);
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
    );
  }
}
  1. 运行后点击按钮即可触发 JavaScript 调用 Dart 的逻辑。

更多关于在企业级应用开发中，如何通过Flutter实现稳定可靠的拨打电话功能？的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


以下是一个简单的Flutter WebView中JavaScript与Dart交互的示例：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewExample(),
    );
  }
}

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;

  void callJSFunction() async {
    final result = await _controller.runJavascriptReturningResult("helloFromDart()");
    print(result); // 打印JavaScript返回的结果
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView JS交互'),
      ),
      body: WebView(
        initialUrl: 'about:blank',
        onWebViewCreated: (WebViewController webViewController) {
          _controller = webViewController;
          _controller.loadUrl('assets/index.html'); // 加载本地HTML文件
        },
        javascriptMode: JavascriptMode.unrestricted,
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: callJSFunction,
        child: Icon(Icons.call_end),
      ),
    );
  }
}

本地HTML文件index.html内容：

<!DOCTYPE html>
<html>
<head>
  <title>WebView</title>
  <script type="text/javascript">
    function helloFromDart() {
      alert('Hello from JavaScript!');
      return 'Hi from JS';
    }
  </script>
</head>
<body>
</body>
</html>

在这个例子中，点击按钮会调用WebView中的JavaScript函数，并打印其返回值。

这是Flutter WebView中实现JavaScript与Dart交互的完整示例：

  1. 首先添加webview_flutter依赖：
dependencies:
  webview_flutter: ^4.4.0
  1. 基本交互实现代码：
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}

class _WebViewExampleState extends State<WebViewExample> {
  late final WebViewController _controller;

  @override
  void initState() {
    super.initState();
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel(
        'Flutter',  // JavaScript调用Dart的通道名称
        onMessageReceived: (JavaScriptMessage message) {
          ScaffoldMessenger.of(context).showSnackBar(
            SnackBar(content: Text('JS说: ${message.message}')),
          );
        },
      )
      ..loadHtmlString('''
        <html>
          <body>
            <button onclick="callFlutter()">调用Flutter</button>
            <script>
              function callFlutter() {
                Flutter.postMessage('Hello from JavaScript!');
              }
              
              // Dart调用JS后执行的函数
              function dartToJS(message) {
                alert('Dart说: ' + message);
                return 'JS已收到';
              }
            </script>
          </body>
        </html>
      ''');
  }

  // Dart调用JavaScript
  Future<void> _callJS() async {
    final result = await _controller.runJavaScriptReturningResult(
      'dartToJS("Hello from Dart!")',
    );
    print('JS返回值: $result');
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('WebView交互')),
      body: Column(
        children: [
          ElevatedButton(
            onPressed: _callJS,
            child: Text('Dart调用JS'),
          ),
          Expanded(
            child: WebViewWidget(controller: _controller),
          ),
        ],
      ),
    );
  }
}

关键点说明：

  1. JavaScript调用Dart：使用addJavaScriptChannel注册通道，JS通过Flutter.postMessage()发送消息
  2. Dart调用JavaScript：使用runJavaScript或runJavaScriptReturningResult方法
  3. 双向通信都支持传递复杂数据（JSON格式最佳）
  4. iOS需要额外配置允许JavaScript交互

实际开发中，建议：

  1. 封装通信协议
  2. 添加错误处理
  3. 对传输数据做验证
  4. 注意线程安全问题
回到顶部