Flutter JavaScript集成插件js_widget的使用

Flutter JavaScript集成插件js_widget的使用

Flutter 中有一个插件 js_widget，它允许你通过 WebView 将任何基于 JavaScript 的小部件作为 Flutter 小部件使用。该库深受并重用了 senthilnasa/high_chart 的优秀工作成果。我只是将其泛化为支持任意的 JavaScript 小部件，而不仅仅限于 Highcharts。

使用步骤

1. 添加依赖

在你的 pubspec.yaml 文件中添加 js_widget 依赖：

dependencies:
  js_widget: ^0.1.0

然后运行以下命令以获取依赖：

flutter pub get

2. 初始化 WebView 和加载 JavaScript

首先，你需要一个简单的 Flutter 项目结构，并确保你已经初始化了 WebView。

示例代码

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

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

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

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late WebViewController _controller;

  // 加载完成后的回调函数
  void _onWebCreated(WebViewController controller) {
    _controller = controller;
    // 在 WebView 中注入 JavaScript 并执行
    _controller.runJavascript("document.body.style.backgroundColor = 'lightblue';");
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('js_widget 示例'),
      ),
      body: JsWidget(
        onWebCreated: _onWebCreated,
        htmlContent: """
        <!DOCTYPE html>
        <html>
          <head>
            <title>示例页面</title>
            <script>
              function renderChart() {
                var ctx = document.getElementById('myChart').getContext('2d');
                var myChart = new Chart(ctx, {
                  type: 'bar',
                  data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                      label: '# of Votes',
                      data: [12, 19, 3, 5, 2, 3],
                      backgroundColor: [
                        'rgba(255, 99, 132, 0.2)',
                        'rgba(54, 162, 235, 0.2)',
                        'rgba(255, 206, 86, 0.2)',
                        'rgba(75, 192, 192, 0.2)',
                        'rgba(153, 102, 255, 0.2)',
                        'rgba(255, 159, 64, 0.2)'
                      ],
                      borderColor: [
                        'rgba(255, 99, 132, 1)',
                        'rgba(54, 162, 235, 1)',
                        'rgba(255, 206, 86, 1)',
                        'rgba(75, 192, 192, 1)',
                        'rgba(153, 102, 255, 1)',
                        'rgba(255, 159, 64, 1)'
                      ],
                      borderWidth: 1
                    }]
                  },
                  options: {
                    scales: {
                      yAxes: [{
                        ticks: {
                          beginAtZero: true
                        }
                      }]
                    }
                  }
                });
              }
            </script>
          </head>
          <body onload="renderChart()">
            <canvas id="myChart" width="400" height="400"></canvas>
          </body>
        </html>
        """,
      ),
    );
  }
}

更多关于Flutter JavaScript集成插件js_widget的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter JavaScript集成插件js_widget的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


js_widget 是 Flutter 中的一个插件，用于将 JavaScript 代码或 Web 内容嵌入到 Flutter 应用程序中。这个插件通常用于需要显示 Web 页面或运行 JavaScript 代码的场景。以下是如何在 Flutter 项目中使用 js_widget 插件的基本步骤。

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 js_widget 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  js_widget: ^1.0.0  # 请使用最新版本

然后运行 flutter pub get 来安装依赖。

2. 导入插件

在你的 Dart 文件中导入 js_widget 插件：

import 'package:js_widget/js_widget.dart';

3. 使用 JsWidget

你可以在 Flutter 应用程序中使用 JsWidget 来嵌入 JavaScript 代码或 Web 页面。以下是一个简单的示例：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('JsWidget Example'),
        ),
        body: JsWidget(
          // 你可以在这里指定要加载的 HTML 或 JavaScript 代码
          html: '''
            <html>
              <body>
                <h1>Hello, Flutter!</h1>
                <p>This is an embedded HTML page.</p>
                <script>
                  document.write("This is JavaScript running in Flutter.");
                </script>
              </body>
            </html>
          ''',
          // 你也可以指定一个 URL 来加载外部网页
          // url: 'https://www.example.com',
        ),
      ),
    );
  }
}

4. 运行应用程序

运行你的 Flutter 应用程序，你将看到嵌入的 HTML 页面或 JavaScript 代码在 Flutter 应用中显示。

5. 其他功能

JsWidget 还支持与 JavaScript 代码进行双向通信。你可以通过 onMessageReceived 回调来监听来自 JavaScript 的消息，并通过 sendMessage 方法向 JavaScript 发送消息。

JsWidget(
  html: '''
    <html>
      <body>
        <h1>Hello, Flutter!</h1>
        <p id="message"></p>
        <script>
          function receiveMessage(message) {
            document.getElementById("message").innerText = message;
          }
        </script>
      </body>
    </html>
  ''',
  onMessageReceived: (message) {
    print("Received message from JavaScript: $message");
  },
)

在 Flutter 中发送消息给 JavaScript：

jsWidgetController.sendMessage("Hello from Flutter!");

6. 注意事项

  • JsWidget 依赖于 Flutter 的 webview_flutter 插件，因此需要确保 webview_flutter 正常工作。
  • 在 iOS 上，webview_flutter 需要启用 WKWebView，这可以通过在 Info.plist 中添加以下配置来实现：
<key>io.flutter.embedded_views_preview</key>
<true/>
回到顶部