准备工作

下载安装 Android Studio 或 IntelliJ IDEA 或 Visual Studio Code 并配置好flutter 拓展，详细资料请查看flutter中文社区的中文文档。（本文将使用Android Studio）

目标一：调用js弹出一个alert对话框。

首先，我们创建一个页面，放置一个简单的按钮

引入 dart:js 包，因为该包是未封装的函数，可能会与现有代码产生冲突，所以我们给其添加命名空间 js。

import 'dart:js' as js;

在按钮的 onPressed 事件添加以下代码，ctrl + s 热更新页面，点击按钮，成功弹出弹窗！

js.context.callMethod("alert",["Hello"]);

结论一：

通过查阅源码，我们可以得出 callMethod 方法有两个参数和一个回调：

method：js函数的方法名，类型为dynamic（通过源码注释可以得知，参数类型必须为 String 或 num）
args：js函数的参数，类型为List。
回调：返回js函数的回调。如此一来，事情变得简单多了，请看目标二

目标二：调用js复制内容到粘贴板，并返回是否成功（true/flase）

打开web目录，创建一个文件夹（此处举例为js），新建一个js文件（此处举例文件名为methods.js）

2. 编辑该js文件，添加以下用于操作剪贴板的代码：

function copyToClipboard (text) {
    if(text.indexOf('-') !== -1) {
        let arr = text.split('-');
        text = arr[0] + arr[1];
    }
    var textArea = document.createElement("textarea");
    textArea.style.position = 'fixed';
    textArea.style.top = '0';
    textArea.style.left = '0';
    textArea.style.width = '2em';
    textArea.style.height = '2em';
    textArea.style.padding = '0';
    textArea.style.border = 'none';
    textArea.style.outline = 'none';
    textArea.style.boxShadow = 'none';
    textArea.style.background = 'transparent';
    textArea.value = text;
    document.body.appendChild(textArea);
    textArea.select();
    try {
      var successful = document.execCommand('copy');
      return successful;
    } catch (err) {
      return false;
    }
    document.body.removeChild(textArea);
}

在web目录的index.html 引入该文件（建议添加到 main.dart.js 的上方）：

<script src="js/methods.js" type="application/javascript"></script>

在按钮的 onPressed 事件添加以下代码，之后关闭浏览器，重新启动项目：

var result = js.context.callMethod("copyToClipboard", ["123"]);
print(result);

5.我们可以看到控制台成功返回 true，尝试粘贴一下，是否出现123？

总结二：我们可以在html中引入任意js，之后在dart中callMethod其函数名并带上相关参数即可完成调用任意js。

Flutter-Web的探索之路（二）——简单调用js

准备工作

目标一：调用js弹出一个alert对话框。

结论一：

目标二：调用js复制内容到粘贴板，并返回是否成功（true/flase）