Flutter JavaScript互操作插件js_wrapping_generator的使用

在Flutter中，js_wrapping_generator 是一个用于生成JavaScript包装器的强大工具。它可以帮助开发者更方便地与JavaScript代码进行交互。本文将通过完整的示例代码展示如何使用 js_wrapping_generator。

使用步骤

1. 添加依赖

首先，在项目的 pubspec.yaml 文件中添加 js_wrapping 和 js_wrapping_generator 作为依赖：

dependencies:
  js_wrapping: ^0.6.0

dev_dependencies:
  js_wrapping_generator: ^0.6.0

然后运行以下命令以安装依赖：

flutter pub get

2. 创建JavaScript接口

假设我们有一个简单的JavaScript函数，用于计算两个数字的和。我们将使用 js_wrapping_generator 来生成对应的Dart包装器。

创建一个名为 example.js 的文件，内容如下：

// example.js
function add(a, b) {
    return a + b;
}

3. 生成Dart包装器

接下来，我们需要编写一个 .dart 文件来描述这个JavaScript函数，并让 js_wrapping_generator 自动生成包装器。

创建一个名为 example.dart 的文件，内容如下：

import 'package:js_wrapping/js_wrapping.dart';

@JS()
library example;

import 'dart:js' as js;

// 定义JavaScript函数的签名
@JS('add')
external num add(num a, num b);

4. 使用生成的包装器

现在我们可以直接在Dart代码中调用这个生成的包装器了。

创建一个名为 main.dart 的文件，内容如下：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Js Wrapping Example')),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              // 调用生成的包装器
              num result = add(5, 3);
              print('Result: $result'); // 输出: Result: 8
            },
            child: Text('Call JavaScript Function'),
          ),
        ),
      ),
    );
  }
}

songsunli 1楼•17 天前

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

js_wrapping_generator 是一个用于 Flutter 和 JavaScript 互操作的插件，它可以帮助你生成 Dart 代码来包装 JavaScript 对象，使得在 Flutter 中调用 JavaScript 代码变得更加方便。这个插件通常与 package:js 一起使用，后者是 Dart 提供的用于与 JavaScript 互操作的官方库。

使用步骤

添加依赖：首先，你需要在 pubspec.yaml 文件中添加 js_wrapping_generator 和 build_runner 作为开发依赖。
```
dependencies:
  js: ^0.6.0

dev_dependencies:
  build_runner: ^2.0.0
  js_wrapping_generator: ^0.9.0
```
创建 JavaScript 接口：你需要定义一个 Dart 类来表示 JavaScript 对象，并使用 [@JS](/user/JS) 注解来标记它。这个类将作为 JavaScript 对象的包装器。
```
import 'package:js/js.dart';

[@JS](/user/JS)()
class MyJsClass {
  external MyJsClass();

  external void myJsMethod();
}
```
生成包装代码：使用 js_wrapping_generator 生成 Dart 代码来包装 JavaScript 对象。你需要在你的 Dart 文件中添加 [@JsWrapping](/user/JsWrapping) 注解，并运行 build_runner 来生成代码。
```
import 'package:js_wrapping_generator/js_wrapping_generator.dart';
import 'package:js/js.dart';

[@JsWrapping](/user/JsWrapping)()
[@JS](/user/JS)()
class MyJsClass {
  external MyJsClass();

  external void myJsMethod();
}
```
然后运行以下命令来生成代码：
```
flutter pub run build_runner build
```
这将会生成一个 .g.dart 文件，其中包含了包装 JavaScript 对象的 Dart 代码。
使用生成的代码：你可以在你的 Flutter 应用中使用生成的 Dart 代码来调用 JavaScript 方法。
```
import 'my_js_class.dart';

void main() {
  var jsObject = MyJsClass();
  jsObject.myJsMethod();
}
```

示例

假设你有一个 JavaScript 对象 MyJsClass，它有一个方法 myJsMethod，你可以按照以下步骤在 Flutter 中调用它。

JavaScript 代码：

class MyJsClass {
  constructor() {
    console.log("MyJsClass created");
  }

  myJsMethod() {
    console.log("myJsMethod called");
  }
}

Dart 代码：

import 'package:js_wrapping_generator/js_wrapping_generator.dart';
import 'package:js/js.dart';

[@JsWrapping](/user/JsWrapping)()
[@JS](/user/JS)()
class MyJsClass {
  external MyJsClass();

  external void myJsMethod();
}

生成代码：

运行 flutter pub run build_runner build 后，会生成 my_js_class.g.dart 文件。

使用生成的代码：

import 'my_js_class.dart';

void main() {
  var jsObject = MyJsClass();
  jsObject.myJsMethod();
}