Flutter网页视图与页面调用插件webview_flutter_pagecall_poc的使用

在Flutter应用中，嵌入网页是非常常见的需求。webview_flutter 插件提供了强大的功能来实现这一需求，并且可以通过 webview_flutter_pagecall_poc 插件实现网页与Flutter页面之间的双向通信。

1. 引入依赖

首先，在 pubspec.yaml 文件中添加 webview_flutter 和 webview_flutter_pagecall_poc 的依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.0.0
  webview_flutter_pagecall_poc: ^1.0.0

然后运行 flutter pub get 来安装这些依赖。

2. 配置 Android 和 iOS

Android

确保 minSdkVersion 至少为 19：

android {
    defaultConfig {
        minSdkVersion 19
    }
}

iOS

确保 Xcode 版本支持 WKWebView（通常 Xcode 10 及以上）。

3. 基本使用示例

以下是一个完整的示例代码，展示如何使用 webview_flutter 和 webview_flutter_pagecall_poc 插件：

// 导入必要的库
import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:webview_flutter_pagecall_poc/webview_flutter_pagecall_poc.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: WebViewPage(),
    );
  }
}

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController _controller;

  @override
  void initState() {
    super.initState();

    // 初始化 WebView 控制器
    _controller = WebViewController()
      ..setJavaScriptMode(JavaScriptMode.unrestricted)
      ..setNavigationDelegate(NavigationDelegate(
        onProgress: (int progress) {
          print('Loading progress: $progress%');
        },
        onPageStarted: (String url) {
          print('Page started loading: $url');
        },
        onPageFinished: (String url) {
          print('Page finished loading: $url');
        },
      ))
      ..loadRequest(Uri.parse('https://example.com'));

    // 添加 PageCall 支持
    _controller.addPageCallHandler((message) {
      print('Received message from web: $message');
      return 'Response from Flutter';
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('WebView with PageCall'),
      ),
      body: WebViewWidget(controller: _controller),
    );
  }
}

4. 关键功能说明

4.1 加载网页

通过 WebViewController.loadRequest() 方法加载指定的 URL 或本地文件。

_controller.loadRequest(Uri.parse('https://example.com'));

4.2 设置 JavaScript 模式

允许或禁止执行 JavaScript：

_controller.setJavaScriptMode(JavaScriptMode.unrestricted);

4.3 页面导航拦截

通过 NavigationDelegate 拦截页面跳转请求：

_navigationDelegate: NavigationDelegate(
  onNavigationRequest: (NavigationRequest request) {
    if (request.url.startsWith('https://youtube.com')) {
      return NavigationDecision.prevent; // 阻止跳转到 YouTube
    }
    return NavigationDecision.navigate; // 允许其他跳转
  },
),

4.4 双向通信（PageCall）

使用 addPageCallHandler 注册一个处理函数，用于接收来自网页的消息并返回响应。

_controller.addPageCallHandler((message) {
  print('Received message from web: $message');
  return 'Response from Flutter';
});

在网页端可以调用以下 JavaScript 代码发送消息：

window.flutter_inappwebview.callHandler('pageCallHandler', 'Hello from web!');

5. 完整 Demo 效果

运行上述代码后，您将看到一个带有 WebView 的页面，能够加载指定的网页并支持从网页向 Flutter 传递消息。同时，您可以点击按钮触发 Flutter 向网页发送响应。

6. 注意事项

1. 权限设置：确保您的 AndroidManifest.xml 文件中包含网络访问权限：

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

2. 调试模式：在 Android 上启用 WebView 调试功能（可选）：

   AndroidWebViewController.enableDebugging(true);