javascript - 无法在 flutter webview 中打开 tel、mailto、whatsapp 链接？

Question

我是一名 Web 开发人员，也是 Flutter 的初学者。我通过观看一些教程创建了一个 Flutter Web View 应用程序，它在 iOS 和 Android 上运行良好。但是，当我单击“0123456789”、mailto:“abc@gmail.com”、WhatsApp 链接 ( https://wa.me/9712345678 ) 时，它会转到未找到页面。我想为这些条件打开一个外部应用程序。如何快速处理此任务以支持 iOS 和 Android？我使用 flutter webview 插件来启动一个 url，例如:我可以知道在哪里添加以下代码才能工作吗？

              if (request.url.contains("mailto:")) {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              } else if (request.url.contains("tel:")) {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              } else if (request.url.contains("sms:")) {
                _launchURL(request.url);
                return NavigationDecision.prevent;
              }
              return NavigationDecision.navigate;
            },

import 'dart:io';

import 'package:flutter/material.dart';
import 'package:flutter_webview_plugin/flutter_webview_plugin.dart';
import 'package:flutter_offline/flutter_offline.dart';
import 'package:location/location.dart';
import 'package:url_launcher/url_launcher.dart';

_launchURL(url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

void main() => runApp(MyApp());
Color btnColor = Color(0xff03a9f3);
Color bgColor = Color(0xffe9f4fc);

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Qavenue',
      home: OfflineBuilder(
        connectivityBuilder: (
          BuildContext context,
          ConnectivityResult connectivity,
          Widget child,
        ) {
          final bool connected = connectivity != ConnectivityResult.none;
          return Container(
            child: connected
                ? MyHomePage()
                : Center(
                    child: Image.asset(
                      'assets/offline_blue.gif',
                      fit: BoxFit.cover,
                      width: 200.0,
                    ),
                  ),
            color: bgColor,
          );
        },
        child: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  String url = "https://example.xyz/";

  final flutterWebviewPlugin = new FlutterWebviewPlugin();
  StreamSubscription<WebViewStateChanged>
      _onchanged; // here we checked the url state if it loaded or start Load or abort Load

  @override
  void initState() {
    super.initState();
    _onchanged =
        flutterWebviewPlugin.onStateChanged.listen((WebViewStateChanged state) {
      if (mounted) {
        if (state.type == WebViewState.finishLoad) {
          // if the full website page loaded`
          print("loaded");
        } else if (state.type == WebViewState.abortLoad) {
          // if there is a problem with loading the url
          print("there is a problem");
        } else if (state.type == WebViewState.startLoad) {
          // if the url started loading
          print("start loading");
        }
      }
    });
  }

  @override
  void dispose() {
    super.dispose();
    flutterWebviewPlugin
        .dispose(); // disposing the webview widget to avoid any leaks
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: WillPopScope(
          onWillPop: () {
            flutterWebviewPlugin.canGoBack().then((value) {
              if (value) {
                flutterWebviewPlugin.goBack();
              } else {
                exit(0);
              }
            });
          },
          child: WebviewScaffold(
            url: url,
            withJavascript: true,
            withZoom: false,
            hidden: true,
            geolocationEnabled: true,
            initialChild: Container(
              color: Colors.white,
              child: Center(
                child: Image.asset('assets/icon/images/logo1.jpg'),
              ),
            ),
          )),
    );
  }
}

Answer 1

解决这个问题的一种方法是也导入 url_launcher_string.dart。当您指定链接时，您将需要它。

import 'package:url_launcher/url_launcher_string.dart';

运行 flutter pub get，然后在您的主应用程序 dart(例如 main.dart)中告诉它如何处理 url。

      launchURL(url) async {
    if (await canLaunchUrl(url)) {
      await launchUrl(url);
    } else {
      throw 'Could not launch $url';
    }
  }

上面的代码部分可以在任何地方。你也可以把它放在另一个 Dart 里并导入它。如果你把它放在你的 webview 小部件类中而不是像你那样放在任何地方当然会更好，除非你也需要在其他地方使用它。之后，您在 webview 小部件类中指定如何处理 url。例如在:

class WebViewApp extends StatefulWidget {
}

代码的“NavigationDecision”部分。例如:

  NavigationDecision _interceptNavigation(NavigationRequest request) {
    if (request.url.contains("mailto:")) {
      launchUrlString('mailto:specify email address here');
      return NavigationDecision.prevent;
    } else if (request.url.contains("tel:")) {
      launchUrlString('tel:specify telephone number here');
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  }

在上面的代码部分中，您定义了“请求”，然后告诉它如何处理每个请求。因此，如果您定义“NavigationRequest 请求”，那么您将告诉它如何处理每个请求。如果您定义“NavigationRequest name”，那么您指定要如何处理该名称。例如

  NavigationDecision _interceptNavigation(NavigationRequest name) {
    if (name.url.contains("mailto:")) {
      launchUrlString('mailto:specify email address here');
      return NavigationDecision.prevent;
    } else if (name.url.contains("tel:")) {
      launchUrlString('tel:specify telephone number here');
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  }

当然，您可以通过编辑 name.url.contains 行并添加更多 else if decisions 来添加更多 url。例如whatsapp、电报、viber 等。就像您对短信所做的那样。

不要忘记在需要时调用您的导航决策代码。在你告诉你的 webview 什么是初始 url 的覆盖内，你用你设置的名称调用你的导航决定。例如:

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
          child: WebView(
            initialUrl: 'https:url', // Webview initial url here
            javascriptMode: JavascriptMode.unrestricted, // Enable use of javascript
            navigationDelegate: _interceptNavigation, // Call for your navigation decision
          ),
        )
    );
  }

我们将其命名为“_interceptNavigation”，这就是我们的要求。这就是对那部分代码的理解。希望对您有所帮助。我也为初学者一步一步地解释了它。