突破边界！Flutter带你征服JavaScript世界！

站长

2023年06月24日 14:16 · 阅读数 9

嗨，我是甜瓜看代码。在本篇文章中，我将向你介绍如何使用最新版本（4.2.2）的webview_flutter库与JavaScript进行互动。我们将探索如何将消息从js传递给Flutter页面，以及一些其他有趣的扩展内容。

安装与设置

首先，我们需要确保已经安装了最新版本的webview_flutter库。在你的pubspec.yaml文件中，将其添加为依赖项：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.2.2

确保运行flutter packages get来获取最新的库。

接下来，让我们设置一些必要的权限。在Android上，我们需要添加INTERNET权限到AndroidManifest.xml文件中：

<uses-permission android:name="android.permission.INTERNET" />

在iOS上，我们需要在Info.plist文件中添加App Transport Security（ATS）例外，以允许HTTP请求：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

一旦设置完成，我们就可以开始构建与JavaScript交互的应用程序了。

创建Webview

首先，让我们创建一个基本的WebViewPage，以显示一个简单的网页,这里我显示了自己掘金的主页。我们将使用WebViewController配合WebViewWidget小部件来实现这一点。让我们看看下面的代码：

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController mController;

  @override
  void initState() {
    mController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..loadRequest(Uri.parse('https://juejin.cn/user/3593662442508760'));

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [Expanded(child: WebViewWidget(controller: mController))],
    );
  }
}

在上述代码中，我们创建了一个名为WebViewPage的小部件。在build方法中，我们使用WebViewWidget来创建一个基本的应用程序界面。

WebViewWidget小部件是我们实际用于显示网页的地方。我们将mController初始化时设置的URI属性设置为你希望显示的网页URL。javascriptMode属性被设置为JavascriptMode.unrestricted，以便启用与JavaScript的交互。

现在，如果你运行应用程序，你应该能够看到我的掘金主页啦。不过这里还有点小问题，或许我们可以使用SafeArea包裹一下以防止页面顶到状态栏下方去了。SafeArea的介绍在我的另外一篇文章中Flutter SafeArea：不再为异形屏适配而担心。

与JavaScript交互

好的，现在让我们来实现与JavaScript的互动吧！我们将学习如何获取网页高度以及在网页中调用Flutter页面。

const htmlString = '''
<!DOCTYPE html>
<head>
    <style>
        body {
            background-color: white;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }
    </style>
</head>
<body>
    <h1>甜瓜看代码</h1>
    <script>
    const resizeObserver = new ResizeObserver(entries =>
          Js.postMessage("来自Js的甜瓜"))
    resizeObserver.observe(document.body)
    </script>
</body>
''';

class WebViewPage extends StatefulWidget {
  const WebViewPage({super.key});

  @override
  State<WebViewPage> createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late final WebViewController mController;

  @override
  void initState() {
    mController = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..addJavaScriptChannel('Js', onMessageReceived: (message){
        print('收到来自js的消息是：${message.message}');
      })
      ..loadHtmlString(htmlString);

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [Expanded(child: WebViewWidget(controller: mController))],
    );
  }
}

让我们看看我们所做的更改：

在WebViewWidget中加载的不再是一个url对应的网页，而是一个html字符串，字符串中定义ResizeObserver实体并通过方法名为Js来传递消息；
在WebViewController的javascriptChannels属性中，我们创建了一个名为Js的JavascriptChannel，并定义了其onMessageReceived回调。当网页通过该通道发送消息时，我们将调用方法获取到JS传递过来的JavaScriptMessage对象。

现在，当网页中调用Js.postMessage("来自Js的甜瓜")时，我们将在Flutter端收到消息。这为我们提供了一种与网页交互的方式，以执行更复杂的操作。

突破边界！Flutter带你征服JavaScript世界！

其他扩展

除了js与Flutter页面传递消息之外，webview_flutter库还提供了许多其他有用的功能。以下是一些你可能感兴趣的扩展：

拦截URL加载：你可以使用WebViewController的setNavigationDelegate属性来拦截网页加载请求，并根据你的需求决定是否允许加载特定URL。
处理网页表单提交：你可以使用WebView的setNavigationDelegate属性来捕获网页表单提交的动作，并采取相应的操作。

这只是webview_flutter库提供的一些功能的示例。你可查看webview_flutter以获取更多信息，并发现其他有趣的功能。

总结

在本篇文章中，我们探索了如何使用webview_flutter库与JavaScript进行互动。我们学习了如何js与Flutter页面传递消息，并简要介绍了其他一些扩展功能。希望这篇文章对你有所帮助，并能够让你更好地与JavaScript进行互动。

希望本篇文章对你有所帮助，这里是甜瓜看代码，期待你的关注。