Flutter WebView无法唤起WhatsApp和电话应用的问题求助

核心思路 #

WebView默认不会处理唤起本地应用的URL，需要手动拦截这类链接，通过Flutter原生能力调用系统对应应用。

具体实现步骤 #

1. 准备依赖 #

在pubspec.yaml中添加必要依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0 # 使用最新稳定版本
  url_launcher: ^6.2.0 # 用于唤起本地应用

执行flutter pub get完成依赖安装。

2. 拦截WebView的URL请求 #

通过WebView的navigationDelegate拦截目标URL，转由Flutter处理：

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';
import 'package:url_launcher/url_launcher.dart';

class EmbeddedWebView extends StatefulWidget {
  final String targetUrl;
  const EmbeddedWebView({super.key, required this.targetUrl});

  @override
  State<EmbeddedWebView> createState() => _EmbeddedWebViewState();
}

class _EmbeddedWebViewState extends State<EmbeddedWebView> {
  late final WebViewController _webController;

  @override
  void initState() {
    super.initState();
    _webController = WebViewController()
      ..loadRequest(Uri.parse(widget.targetUrl))
      ..setNavigationDelegate(
        NavigationDelegate(
          onNavigationRequest: (NavigationRequest request) async {
            final url = request.url;
            // 处理WhatsApp链接
            if (url.startsWith('whatsapp://') || url.startsWith('https://wa.me/')) {
              if (await canLaunchUrl(Uri.parse(url))) {
                await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
              }
              return NavigationDecision.prevent; // 阻止WebView加载该链接
            }
            // 处理电话链接
            if (url.startsWith('tel:')) {
              if (await canLaunchUrl(Uri.parse(url))) {
                await launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication);
              }
              return NavigationDecision.prevent;
            }
            // 其他链接由WebView正常加载
            return NavigationDecision.navigate;
          },
        ),
      );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebViewWidget(controller: _webController),
    );
  }
}

3. 配置平台权限（关键） #

Android端

在android/app/src/main/AndroidManifest.xml中添加权限和应用查询声明：

<uses-permission android:name="android.permission.CALL_PHONE" />
<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="whatsapp" />
  </intent>
  <intent>
    <action android:name="android.intent.action.DIAL" />
    <data android:scheme="tel" />
  </intent>
</queries>

Android 11及以上必须添加<queries>，否则无法唤起外部应用。

iOS端

在ios/Runner/Info.plist中添加允许查询的应用Scheme：

<key>LSApplicationQueriesSchemes</key>
<array>
  <string>whatsapp</string>
  <string>tel</string>
</array>

4. 测试验证 #

确保手机已安装WhatsApp，点击WebView内的对应按钮，应直接唤起WhatsApp或系统拨号界面。

常见问题排查 #

• 检查URL格式是否正确：
  • WhatsApp链接：whatsapp://send?phone=+123456789 或 https://wa.me/123456789
  • 电话链接：tel:+123456789
• 若canLaunchUrl返回false，说明系统无对应应用或权限配置有误。

内容的提问来源于stack exchange，提问作者Gila Mac SecretRainer