Webview Flutter: 与网页实现无缝交互的秘诀

借助 Webview Flutter 4.0 提升 Web 应用开发体验

作为 Flutter 开发者，将 Web 内容无缝集成到移动应用中是我们的日常任务。Webview Flutter 4.0 的强大新功能使这一过程变得前所未有地简单高效。

优雅地控制页面导航

过去，控制页面导航需要繁琐的代码。Webview Flutter 4.0 的 URL 拦截功能让一切变得简单。只需几行代码，我们就可以拦截特定的 URL，执行自定义操作，如打开新页面、显示对话框或触发事件。

WebView(
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith('https://example.com/')) {
      // 打开新页面
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => MyNewPage()),
      );
      return NavigationDecision.navigate;
    } else {
      // 执行其他操作
      showDialog(
        context: context,
        builder: (context) => AlertDialog(
          title: Text('提示'),
          content: Text('你确定要导航到这个页面吗？'),
          actions: [
            TextButton(
              onPressed: () => Navigator.pop(context),
              child: Text('取消'),
            ),
            TextButton(
              onPressed: () {
                Navigator.pop(context);
                request.complete(NavigationDecision.navigate);
              },
              child: Text('确定'),
            ),
          ],
        ),
      );
      return NavigationDecision.prevent;
    }
  },
);

与 JavaScript 无缝交互

JavaScriptChannel 是一个游戏规则改变者，它允许 Flutter 和 JavaScript 之间的双向通信。通过它，我们可以调用 JavaScript 函数、接收 JavaScript 事件，以及在两者之间传递数据。

JavaScriptChannel(
  name: 'myChannel',
  onMessageReceived: (JavaScriptMessage message) {
    print('Received message: ${message.message}');
  },
);

window.flutter_inner.callHandler('myChannel', 'Hello from JavaScript!');

动态修改网页内容

JS 注入赋予我们前所未有的灵活性，可以在 WebView 加载后动态修改网页内容。我们可以在 HTML 中添加或删除元素、更改样式，甚至执行 JavaScript 代码。

String js = '''
  document.body.style.backgroundColor = 'red';
  alert('Hello from Flutter!');
''';

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  javascriptChannels: <JavaScriptChannel>[
    JavaScriptChannel(
      name: 'myChannel',
      onMessageReceived: (JavaScriptMessage message) {
        print('Received message: ${message.message}');
      },
    ),
  ],
  javascript: js,
);

结论

Webview Flutter 4.0 是 Web 应用开发领域的革命性更新。其强大的新功能，包括 URL 拦截、JavaScriptChannel 和 JS 注入，使我们能够创建功能更强大、交互性更强的 Web 体验。

常见问题解答

1. 如何拦截所有 URL 并打开一个新页面？

WebView(
  navigationDelegate: (NavigationRequest request) {
    Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => MyNewPage()),
    );
    return NavigationDecision.navigate;
  },
);

2. 如何使用 JavaScriptChannel 在 Flutter 中调用 JavaScript 函数？

JavaScriptChannel(
  name: 'myChannel',
  onMessageReceived: (JavaScriptMessage message) {
    print('Received message: ${message.message}');
  },
);

// 在 Flutter 中调用 JavaScript 函数
final jsChannel = await WebView.platform.invokeMethod('callJsMethod', <String, String>{
  'channelName': 'myChannel',
  'methodName': 'myFunction',
  'args': '["hello", "world"]',
});

3. 如何在 WebView 中使用 JS 注入添加一个 HTML 元素？

String js = '''
  var div = document.createElement('div');
  div.innerHTML = 'Hello from Flutter!';
  document.body.appendChild(div);
''';

WebView(
  javascriptMode: JavascriptMode.unrestricted,
  javascript: js,
);

4. 如何使用 Webview Flutter 4.0 接收来自 JavaScript 的事件？

JavaScriptChannel(
  name: 'myChannel',
  onMessageReceived: (JavaScriptMessage message) {
    print('Received message: ${message.message}');
  },
);

window.flutter_inner.send('myChannel', 'Hello from JavaScript!');

5. 如何通过 Webview Flutter 4.0 在 Flutter 和 JavaScript 之间传递数据？

JavaScriptChannel(
  name: 'myChannel',
  onMessageReceived: (JavaScriptMessage message) {
    print('Received message: ${message.message}');
  },
);

// 在 Flutter 中发送数据到 JavaScript
final jsChannel = await WebView.platform.invokeMethod('callJsMethod', <String, String>{
  'channelName': 'myChannel',
  'methodName': 'myFunction',
  'args': '["hello", "world"]',
});

window.flutter_inner.callHandler('myChannel', 'Hello from JavaScript!', ['Hello', 'World']);