从Dart调用JavaScript

Question

我能够从Dart发送警报消息，但是无法弄清楚如何从Dart调用我在另一个JS文件中编写的函数。如果这很简单的话，这将是一个很好的卖点。我看到了这篇帖子，它让我有所启发，但我认为一定有办法，因此，如果您找到了解决方法，请分享给我们。

这里是我做的：

1. 将以下内容添加到yaml文件中：

   dependencies: js: hosted: js

2. 在Dart文件顶部添加导入语句：import 'package:js/js.dart' as js;

3. 添加下面的代码以显示警报消息

   js.scoped(() { js.context.alert("跳跃高兴！"); });

4. 这里是我认为应该起作用但不起作用的部分：鉴于我有一个名为doSomething()的JavaScript函数，我应该能够调用

   js.context.doSomething();

- BraveNewMath

Answer 1

首先在你的 pubspec.yaml 文件中添加 js 包 依赖：

dependencies:
  js: any

然后您可以像这样使用您自己的JS函数myFunc()：

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

main() {
  js.context.myFunc();
}

js.context是javascript window的别名。

有关详细信息，请参见 从Dart使用JavaScript：js库。

- Alexandre Ardhuin

---

为了让上述代码运行，我们在导入时应该指定前缀：import 'package:js/js.dart' as js; - Kai Sellgren

js:0.0.13是什么，它与js:any有何不同？ - BraveNewMath

字符串 "any" 允许使用任何版本（参见版本约束）。我将 0.0.13 放置在其中以确保使用最新可用版本。 - Alexandre Ardhuin

js.scoped 还在使用吗？ - alearg

由于package:js已经与dart:js集成，因此已删除js.scoped。 - Alexandre Ardhuin

js.context不再存在。 - alireza easazade

Answer 2

也许我的答案对某些人有价值，所以我将发布一个简单的JS函数调用从Dart中调用的例子。

1. Add the js package dependency:

   dependencies:
     js: any
   

2. Create a JS file, let's say example.js:

   function test() {
     return 12+20;
   }
   

3. Add the example.js above inside index.html with the <script src="..."> tag.
4. Interop the function above from JS to Dart:

   @JS()
   library t;
   
   import 'package:js/js.dart';
   
   @JS()
   external int Test();
   
   class MyOwn {
     int get value => Test();
   }
   

5. And, in AngularDart's TODOLIST — which is default component available —:

   @override
   Future<Null> ngOnInit() async => print(MyOwn().value);
   

- Mohsin AR

---

如果我想调用的JS是一个NPM包，我该怎么办？例如：https://github.com/polkadot-js/extension - AlexK