如何解决Dart调用JS函数时的两类报错问题？

一、修复Error: Not found: 'dart:js'报错 #

1. 明确项目适用范围：dart:js仅支持Dart Web或Flutter Web项目，Flutter移动端（iOS/Android）无法直接使用该库。若为移动端场景，需通过webview_flutter这类webview组件嵌入网页后实现JS交互。
2. 正确引入依赖：不要手动修改js.dart内部代码，在pubspec.yaml中添加官方维护的js包依赖：

   dependencies:
     js: ^0.6.7 # 可替换为最新稳定版本
   

3. 规范导入语句：代码中使用package:js/js.dart替代dart:js：

   import 'package:js/js.dart';
   

二、修复No top-level method 'callJsFunc' declared报错 #

该错误核心是Dart代码调用的callJsFunc未在全局JS环境中定义或未正确绑定，按以下步骤排查：

1. 确保JS端存在全局函数：在网页的<script>标签中声明全局的callJsFunc，以Flutter Web为例，需将脚本放在web/index.html中，确保在Flutter初始化前加载：

   function callJsFunc() {
     console.log("JS函数已被调用");
     // 自定义业务逻辑
   }
   

2. 在Dart端正确绑定JS函数：使用@JS()注解绑定全局JS函数，示例代码：

   import 'package:js/js.dart';
   
   // 绑定全局JS函数callJsFunc
   @JS()
   external void callJsFunc();
   
   // 调用示例
   void main() {
     callJsFunc();
   }
   

3. 校验函数名一致性：确保Dart端绑定的函数名与JS端的函数名完全匹配（大小写敏感）。

额外场景说明 #

若为Flutter移动端，放弃js包，改用webview_flutter组件通过runJavascript()执行JS代码，示例：

import 'package:webview_flutter/webview_flutter.dart';

final controller = WebViewController()
  ..loadRequest(Uri.parse('你的网页地址'));

// 调用JS函数
void invokeJsFunc() async {
  await controller.runJavascript('callJsFunc();');
}

内容的提问来源于stack exchange，提问作者YK07