Flutter - 来自 WebViewScaffold 中显示的网页的电话呼叫答案

【问题标题】：Flutter - Phone Call From Webpage Displayed in a WebViewScaffoldFlutter - 来自 WebViewScaffold 中显示的网页的电话呼叫
【发布时间】：2018-09-06 08:56:56
【问题描述】：

背景：我正在使用 WebViewScaffold (flutter webview plugin) 在我的颤振应用程序中打开一个网站。该网站有一个 call 选项，您可以在其中单击一个按钮并启动“tel://1231231234”网址。

问题：WebView显示网页不可用等（类似于here 显示的问题）。我需要它才能在 iOS 和 Android 上工作。如何在两个设备平台上使用 Flutter WebView 插件来实现这一点？

我见过几个人只在 Android 上使用 Intent（如上图所示的问题）而不使用 Flutter。这是平台特定代码的问题吗？

【问题讨论】：

标签： dart flutter mobile-development

【解决方案1】：

为此做了一些锻炼。

WebviewScaffold(
   url: link,
   invalidUrlRegex: Platform.isAndroid
   ? "^tel:|^https:\/\/api.whatsapp.com\/send|^mailto:"
   : "^tel:|^mailto:",
)

在无效的正则表达式中添加了whatsapp，tel和mailto，因此WebviewScaffold将在onStateChanged捕获它们后中止操作

flutterWebviewPlugin.onStateChanged
    .listen((WebViewStateChanged state) async {
  if (mounted) {
    if (state.type == WebViewState.abortLoad) {
      _launchSocialNativeLink(state.url);
    }
  }
});

Future<void> _launchUrl(String url) async {
  if (await canLaunch(url)) {
    await launch(url);
  } else {
    throw 'Could not launch $url';
  }
}

Future<void> _launchSocialNativeLink(String url) async {
  if (Platform.isIOS) {
    if (url.contains("tel:")) {
      _launchUrl(URL);
    }
  } else if (Platform.isAndroid) {
    if (url.contains(":tel") ||
        url.contains("https://api.whatsapp.com/send")) {
      _launchUrl(URL);
    }
  }
}

【讨论】：

【解决方案2】：

如Flutter Webview Plugin 的示例所示，您可以实现以下方法来更改 URL。

  _onUrlChanged = flutterWebviewPlugin.onUrlChanged.listen((String url) {
      if (mounted) {
        setState(() {
          _history.add("onUrlChanged: $url");
        });
    if(url.contains("tel")){
    //implement for condition
       }
      }
    });

您可以使用 Flutter 提供的 url launcher 包来实现所需的条件，它适用于 Android 和 iOS。希望对您有所帮助。

【讨论】：

我之前尝试过这个解决方案，这个解决方案的问题是 Webpage not available 消息停留在 WebView 中，为了使其正常工作，我必须将所有导航路线弹回主屏幕，然后推送网页路线。这是一个问题，因为用户在网页上失去了位置（也许可以通过保存状态修复）。不仅如此，这不是一个非常干净的解决方案。
那么你必须实现_onStateChanged，即当url开始加载时。试试这个if (state.type == WebViewState.startLoad) { //implementation }。使用state.url访问网址
虽然我可以在网页开始加载时启动 url，但 网页不可用 页面仍会在 WebView 中加载。不知何故，我需要一种方法来防止/取消 url 在 WebView 中加载。