从 Dart 调用 javascript

Question

我能够从 dart 触发警报消息，但不知道如何从 dart 调用我在另一个 js 文件中编写的函数。如果它是直截了当的，这将是一个很好的卖点。我确实看到了this post，这让我开始了，但我觉得一定有办法，所以如果你想通了，请分享爱。

这是我所做的：

1. 将此添加到 yaml 文件中：

   依赖： js： 托管：js

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

3. 添加这段代码以显示警报消息

   js.scoped(() { js.context.alert("高兴得跳起来！"); });

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

   js.context.doSomething();

Answer 1

首先在pubspec.yaml 中添加js package 作为依赖项：

dependencies:
  js: any

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

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

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

js.context 是 javascript window 的别名。

更多详情请见Using JavaScript from Dart: The js Library。

Answer 2

也许我的回答对某人来说是值得的，所以这就是为什么我要从 Dart 发布一个简单的 JS 函数调用。

1. 添加js包依赖：

   dependencies:
     js: any
   

2. 创建一个JS文件，比如说example.js：

   function test() {
     return 12+20;
   }
   

3. 在index.html 中添加上面的example.js 和<script src="..."> 标签。
4. 将上述函数从 JS 互操作到 Dart：

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

5. 并且，在 AngularDart 的 TODOLIST（默认组件可用）中：

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