webview_flutter中第三方应用链接触发net::ERR_UNKNOWN_URL_SCHEME问题

我是移动端开发新手，网站包含WhatsApp、Telegram、电话及Instagram主页链接，使用webview_flutter组件加载页面后，点击这些链接会触发net::ERR_UNKNOWN_URL_SCHEME错误，错误指向的地址类似whatsapp://send/?phone=%2B996500777888.........。

相关代码 #

main.dart #

import 'package:flutter/material.dart';
import 'page/webview_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'НоНси-ОРТ',
      theme: ThemeData.dark(),
      home: const WebViewPage(),
    );
  }
}

webview_page.dart #

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


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

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



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

  double progress = 0;
  
  @override
  Widget build(BuildContext context) {
    return WillPopScope(
      onWillPop: () async {
        if (await _webController.canGoBack()) {
          _webController.goBack();
        } 
        // Stay App
        return false;
      },
      child: Scaffold(
        appBar: AppBar(
          toolbarHeight: 0, 
        ),
        body: Column(
          children: [
            LinearProgressIndicator(
              value: progress,
              color: Colors.red,
              backgroundColor: Colors.black,
            ),
            Expanded(
              child: WebView(
                javascriptMode: JavascriptMode.unrestricted,
                initialUrl: 'https://ort.nonsi.kg',
                onWebViewCreated: (controller) {
                  _webController = controller;
                },
                onProgress: (progress) {
                  this.progress = progress / 100;
                  setState(() {});
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

解决方案 #

这个错误是因为WebView默认仅支持http/https协议，whatsapp://、tel://、tg://这类自定义协议需要手动拦截并调用系统应用处理：

1. 添加链接拦截逻辑 #

在WebView组件中新增navigationDelegate参数，拦截非http/https的链接：

// 先导入url_launcher包
import 'package:url_launcher/url_launcher.dart';

// 修改WebView部分代码
WebView(
  javascriptMode: JavascriptMode.unrestricted,
  initialUrl: 'https://ort.nonsi.kg',
  onWebViewCreated: (controller) {
    _webController = controller;
  },
  onProgress: (progress) {
    this.progress = progress / 100;
    setState(() {});
  },
  // 新增导航拦截
  navigationDelegate: (NavigationRequest request) {
    final url = request.url;
    // 拦截自定义协议链接
    if (!url.startsWith('http://') && !url.startsWith('https://')) {
      // 调用系统应用打开链接
      launchUrl(Uri.parse(url), mode: LaunchMode.externalApplication).then((success) {
        if (!success) {
          ScaffoldMessenger.of(context).showSnackBar(
            const SnackBar(content: Text('无法打开该链接，请检查是否安装对应应用')),
          );
        }
      });
      return NavigationDecision.prevent; // 阻止WebView加载该链接
    }
    return NavigationDecision.navigate; // 允许http/https链接正常加载
  },
)

2. 配置依赖与权限 #

• 在pubspec.yaml中添加url_launcher依赖：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.0
  url_launcher: ^6.2.2

执行flutter pub get安装依赖。

• Android配置：在android/app/src/main/AndroidManifest.xml中添加查询权限：

<queries>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="https" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="whatsapp" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tel" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="tg" />
  </intent>
  <intent>
    <action android:name="android.intent.action.VIEW" />
    <data android:scheme="instagram" />
  </intent>
</queries>

• iOS配置：在ios/Runner/Info.plist中添加支持的协议：

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

内容的提问来源于stack exchange，提问作者Илгиз Таалайбек уулу