flutter怎么执行js方法

Flutter执行JS方法的几种方式包括：使用WebView、使用flutter_js插件、使用dart:js和js包。 在这几种方式中，使用WebView和flutter_js插件是最常见和推荐的方法。下面将详细介绍这几种方式。

一、使用WebView

使用WebView是Flutter应用中执行JS方法的一种常见方式。WebView可以嵌入一个完整的浏览器窗口，因此可以执行任何JavaScript代码。

1. 添加依赖

首先，在pubspec.yaml文件中添加webview_flutter依赖：

dependencies: flutter: sdk: flutter webview_flutter: ^3.0.4

2. 创建WebView并执行JS

接着，在Flutter代码中创建一个WebView，并通过evaluateJavascript方法执行JavaScript代码：

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: Scaffold(
        appBar: AppBar(
          title: Text('Flutter WebView Example'),
        ),
        body: WebViewExample(),
      ),
    );
  }
}
class WebViewExample extends StatefulWidget {
  @override
  _WebViewExampleState createState() => _WebViewExampleState();
}
class _WebViewExampleState extends State<WebViewExample> {
  late WebViewController _controller;
  @override
  Widget build(BuildContext context) {
    return WebView(
      initialUrl: 'about:blank',
      javascriptMode: JavascriptMode.unrestricted,
      onWebViewCreated: (WebViewController webViewController) {
        _controller = webViewController;
        _loadHtmlFromAssets();
      },
    );
  }
  _loadHtmlFromAssets() async {
    String fileHtmlContents = '''
    <!DOCTYPE html>
    <html>
      <head>
        <title>WebView Example</title>
        <script type="text/javascript">
          function showAlert() {
            alert('Hello from JavaScript!');
          }
        </script>
      </head>
      <body>
        <button onclick="showAlert()">Click me!</button>
      </body>
    </html>
    ''';
    _controller.loadUrl(Uri.dataFromString(
        fileHtmlContents, mimeType: 'text/html', encoding: Encoding.getByName('utf-8')
    ).toString());
  }
  _runJavaScript() {
    _controller.evaluateJavascript("showAlert();");
  }
}

在这个例子中，WebView加载了一个包含JavaScript函数的HTML页面，并通过evaluateJavascript方法执行JavaScript代码。

二、使用flutter_js插件

flutter_js插件提供了一个更直接的方法来在Flutter中执行JavaScript代码。

1. 添加依赖

在pubspec.yaml文件中添加flutter_js依赖：

dependencies: flutter: sdk: flutter flutter_js: ^0.3.2

2. 执行JS代码

在Flutter代码中使用flutter_js插件来执行JavaScript代码：

import 'package:flutter/material.dart';
import 'package:flutter_js/flutter_js.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter JS Example'),
        ),
        body: JsExample(),
      ),
    );
  }
}
class JsExample extends StatefulWidget {
  @override
  _JsExampleState createState() => _JsExampleState();
}
class _JsExampleState extends State<JsExample> {
  final JavascriptRuntime jsRuntime = getJavascriptRuntime();
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _runJavaScript,
        child: Text('Run JS'),
      ),
    );
  }
  _runJavaScript() {
    String jsCode = '''
    function showAlert() {
      return 'Hello from JavaScript!';
    }
    showAlert();
    ''';
    final result = jsRuntime.evaluate(jsCode);
    print(result.stringResult); // Output: Hello from JavaScript!
  }
}

在这个例子中，我们使用flutter_js插件创建一个JavaScript运行时，并执行一个JavaScript函数。

三、使用dart:js和js包

对于Web平台，可以使用dart:js和js包来执行JavaScript代码。

1. 添加依赖

在pubspec.yaml文件中添加js依赖：

dependencies: flutter: sdk: flutter js: ^0.6.3

2. 执行JS代码

在Flutter代码中使用dart:js和js包来执行JavaScript代码：

import 'package:flutter/material.dart';
import 'dart:js' as js;
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter JS Example'),
        ),
        body: JsExample(),
      ),
    );
  }
}
class JsExample extends StatefulWidget {
  @override
  _JsExampleState createState() => _JsExampleState();
}
class _JsExampleState extends State<JsExample> {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: ElevatedButton(
        onPressed: _runJavaScript,
        child: Text('Run JS'),
      ),
    );
  }
  _runJavaScript() {
    js.context.callMethod('alert', ['Hello from JavaScript!']);
  }
}

在这个例子中，我们使用dart:js包中的js.context.callMethod方法来执行JavaScript代码。

四、总结

在Flutter中执行JavaScript代码有多种方式，包括使用WebView、flutter_js插件以及dart:js和js包。使用WebView和flutter_js插件是最常见和推荐的方法。每种方式都有其优缺点，开发者可以根据具体需求选择合适的方式。如果需要在项目管理系统中进行团队协作，推荐使用研发项目管理系统PingCode和通用项目协作软件Worktile。

flutter怎么执行js方法

一、使用WebView

1. 添加依赖

2. 创建WebView并执行JS

二、使用flutter_js插件

1. 添加依赖

2. 执行JS代码

三、使用dart:js和js包

1. 添加依赖

2. 执行JS代码

四、总结

相关问答FAQs：