Flutter文本与JavaScript交互插件flutter_tex_js_ios的使用

flutter_tex_js_ios 是一个用于在 Flutter 应用中与 JavaScript 进行交互的插件，特别针对 iOS 平台进行了优化。这个插件允许你在 Flutter 应用中嵌入 WebView，并在其中执行 JavaScript 代码，从而实现 Flutter 与 JavaScript 之间的双向通信。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_tex_js_ios 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_tex_js_ios: ^0.0.1  # 请检查最新版本号

然后运行 flutter pub get 来安装插件。

基本用法

1. 导入包

   在你的 Dart 文件中导入 flutter_tex_js_ios 包：

   import 'package:flutter_tex_js_ios/flutter_tex_js_ios.dart';
   

2. 创建 WebView

   使用 FlutterTexJsIOS 小部件来创建一个 WebView：

   class MyWebView extends StatelessWidget {
     [@override](/user/override)
     Widget build(BuildContext context) {
       return Scaffold(
         appBar: AppBar(
           title: Text('Flutter & JavaScript Interaction'),
         ),
         body: FlutterTexJsIOS(
           initialUrl: 'about:blank',
           javascriptMode: JavascriptMode.unrestricted,
           onPageFinished: (String url) {
             // 页面加载完成后执行的代码
           },
           onMessageReceived: (String message) {
             // 收到来自 JavaScript 的消息
             print('Received message from JS: $message');
           },
         ),
       );
     }
   }
   

3. 在 WebView 中执行 JavaScript

   你可以在 WebView 中执行 JavaScript 代码，例如：

   FlutterTexJsIOS.of(context).evaluateJavascript("alert('Hello from Flutter!');");
   

4. 从 JavaScript 向 Flutter 发送消息

   在 WebView 中，你可以使用 window.flutter_tex_js_ios.postMessage 来向 Flutter 发送消息：

   window.flutter_tex_js_ios.postMessage('Hello from JavaScript!');
   

   在 Flutter 中，你可以通过 onMessageReceived 回调来处理这些消息。

高级用法

• 自定义 HTML/JS 内容：你可以通过 initialUrl 加载本地或远程的 HTML 文件，或者在 Dart 中直接构造 HTML 字符串并加载到 WebView 中。

• 双向通信：除了从 JavaScript 向 Flutter 发送消息外，你还可以从 Flutter 通过 evaluateJavascript 方法向 JavaScript 发送消息，并处理返回的结果。

注意事项

• iOS 平台限制：flutter_tex_js_ios 插件主要针对 iOS 平台进行了优化，因此在 Android 平台上可能会有不同的行为或限制。

• WebView 性能：WebView 的性能和体验可能不如原生 UI 组件，因此在性能敏感的场景下需要谨慎使用。

• 安全性：确保 WebView 中加载的内容是安全的，避免 XSS 或其他安全漏洞。

示例代码

以下是一个完整的示例，展示了如何在 Flutter 应用中与 JavaScript 进行双向通信：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyWebView(),
    );
  }
}

class MyWebView extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter & JavaScript Interaction'),
      ),
      body: Column(
        children: [
          Expanded(
            child: FlutterTexJsIOS(
              initialUrl: 'about:blank',
              javascriptMode: JavascriptMode.unrestricted,
              onPageFinished: (String url) {
                FlutterTexJsIOS.of(context).evaluateJavascript("""
                  document.body.innerHTML = '<button onclick="sendMessage()">Send Message to Flutter</button>';
                  function sendMessage() {
                    window.flutter_tex_js_ios.postMessage('Hello from JavaScript!');
                  }
                """);
              },
              onMessageReceived: (String message) {
                ScaffoldMessenger.of(context).showSnackBar(
                  SnackBar(content: Text('Received: $message')),
                );
              },
            ),
          ),
          ElevatedButton(
            onPressed: () {
              FlutterTexJsIOS.of(context).evaluateJavascript("alert('Hello from Flutter!');");
            },
            child: Text('Send Message to JS'),
          ),
        ],
      ),
    );
  }
}