Flutter JavaScript互操作插件js_interop_utils的使用

发布于 1周前 作者 sinazl 来自 Flutter

Flutter JavaScript互操作插件js_interop_utils的使用

本库利用dart:js_interop提供工具，以实现Dart与JavaScript对象之间的无缝交互，支持深层次和灵活的转换。它包括对Object、Map、Iterable、JSObject、JSArray等的扩展。

特性

  • 对象扩展：使用.toJSDeep将Dart对象转换为JavaScript对象。
  • 映射扩展：使用.toJSDeep将Dart Map对象转换为JavaScript对象，支持深层转换。
  • 可迭代扩展：处理Dart列表和集合，将其转换为JavaScript数组，包括类型化数组。
  • JSObject工具：访问JavaScript对象的键、属性，并将其转换回Dart映射。
  • JSArray工具：处理JavaScript数组，包括推送元素并将其转换为Dart列表。

使用方法

将Dart对象转换为JavaScript对象

// 导入js_interop_utils包
import 'package:js_interop_utils/js_interop_utils.dart';

void main() {
  var map = {'key': 'value', 'number': 42};
  var jsObject = map.toJSDeep; // 转换为`JSObject`
}

处理JavaScript对象

import 'package:js_interop_utils/js_interop_utils.dart';

void main() {
  var jsObject = JSObject();
  jsObject.put('a', 1);
  jsObject.put('b', 2);

  print(jsObject.get('a')); // 访问属性`a`
}

处理集合

import 'package:js_interop_utils/js_interop_utils.dart';

void main() {
  var list = [1, 2, 3];
  var jsArray = list.toJSDeep; // 转换为`JSArray`
}

访问JavaScript数组工具

import 'package:js_interop_utils/js_interop_utils.dart';

void main() {
  var jsArray = JSArray();
  jsArray.push('a');
  jsArray.pushVarArgs('b', 3);

  var list = jsArray.toList(); // 转换为Dart `List`
  print(list); // ['a','b',3]
}

扩展概述

对象扩展

  • toJSDeep：将任何Dart对象转换为深度嵌套的JavaScript对象。

映射扩展

  • toJSDeep：将Dart Map转换为深度嵌套的JavaScript对象。

可迭代扩展

  • toJS：与toJS相同，用于List。
  • toJSDeep：将Dart Iterable转换为深度嵌套的JavaScript数组。

JSObject扩展

  • keys：返回JavaScript对象的所有键。
  • get：通过键访问属性。
  • toMap：将JavaScript对象转换为Dart映射。

JSArray扩展

  • push：将元素追加到JavaScript数组。
  • toList：将JavaScript数组转换为Dart列表。

特性和问题

请在问题跟踪器提交功能请求和错误报告。

作者

Graciliano M. Passos: gmpassos@GitHub

赞助

不要害羞，展示你的爱意，成为我们的GitHub赞助者。 您的支持对我们意义重大，并且它让代码保持活力！ ☕✨

感谢大家的支持！🚀😄

许可证

Apache License - Version 2.0

完整示例代码

import 'package:js_interop_utils/js_interop_utils.dart';

void main() {
  var jsArrayOfStrings = ['a', 'b'].toJS; // JSArray<JSString>
  print('JSArray<JSString>: $jsArrayOfStrings');

  var jsArrayOfNumbers = [1, 2].toJS; // JSArray<JSNumber>
  print('JSArray<JSNumber>: $jsArrayOfNumbers');

  var jsArrayOfPairs = [
    ['a', 1],
    ['b', 2]
  ].toJSDeep; // JSArray<JSArray<JSAny?>>
  print('JSArray<JSArray<JSAny?>>: $jsArrayOfPairs');

  var jsObject = {
    'a': 1,
    'b': 2,
  }.toJSDeep;
  print('JSObject: $jsObject');

  var jsObject2 = {
    'a': [1, 10],
    'b': [2, 20],
  }.toJSDeep;

  print('JSObject (deep): $jsObject2');
}

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

Harmonyos Next教程
1 回复

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


当然，以下是一个关于如何在Flutter项目中使用js_interop_utils插件来实现Flutter与JavaScript互操作的代码案例。假设你已经有一个Flutter项目，并且已经添加了js_interop_utils依赖。

1. 添加依赖

首先，确保在你的pubspec.yaml文件中添加了js_interop_utils依赖：

dependencies:
  flutter:
    sdk: flutter
  js_interop_utils: ^x.y.z  # 请替换为最新的版本号

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

2. 配置Web支持

确保你的Flutter项目已经配置了Web支持。你可以在项目的根目录下运行以下命令来添加Web支持：

flutter config --enable-web

3. 创建JavaScript接口

创建一个JavaScript文件，比如assets/js/my_script.js，并定义一些JavaScript函数：

// assets/js/my_script.js
function greet(name) {
  return `Hello, ${name}!`;
}

function add(a, b) {
  return a + b;
}

4. 在Flutter中加载JavaScript文件

在你的web/index.html文件中，添加对JavaScript文件的引用：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flutter App</title>
  <script defer src="%PUBLIC_URL%/assets/js/my_script.js"></script>
</head>
<body>
  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

5. 使用js_interop_utils进行互操作

在你的Dart代码中，使用js_interop_utils来调用JavaScript函数。创建一个Dart文件，比如lib/js_interop.dart：

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

// 定义一个JavaScript对象类型
@JS()
@anonymous
class MyScript {
  external String greet(String name);
  external int add(int a, int b);
}

// 获取JavaScript对象的全局引用
MyScript get myScript => js_interop.context['myScript'] as MyScript;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter JS Interop'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(callGreet()),
              Text('Result of addition: ${callAdd(5, 3)}'),
            ],
          ),
        ),
      ),
    );
  }

  String callGreet() {
    return myScript.greet('Flutter');
  }

  int callAdd(int a, int b) {
    return myScript.add(a, b);
  }
}

注意：上面的代码假设JavaScript对象myScript已经在全局作用域中可用。在实际应用中，你可能需要在JavaScript代码中显式地将对象挂载到全局作用域，或者通过其他方式确保Dart代码可以访问它。

6. 在JavaScript中挂载对象（如果需要）

如果你没有在JavaScript中显式挂载对象，你可以在my_script.js中添加如下代码：

window.myScript = {
  greet: function(name) {
    return `Hello, ${name}!`;
  },
  add: function(a, b) {
    return a + b;
  }
};

7. 运行Flutter应用

最后，运行你的Flutter应用：

flutter run -d web-server

打开浏览器中的链接，你应该能够看到Flutter应用调用了JavaScript函数并显示了结果。

这个案例展示了如何使用js_interop_utils在Flutter Web应用中与JavaScript进行互操作。根据你的实际需求，你可能需要调整代码结构和逻辑。

回到顶部