Question

背景：我正在使用WebViewScaffold（flutter webview plugin）在我的flutter app中打开一个网站。该网站有一个调用选项，您点击一个按钮，然后启动“tel：// 1231231234”网址。

问题：WebView显示网页不可用等。（类似于here所示的问题）。我需要这个适用于iOS和Android。如何在两个设备平台上使用Flutter WebView插件实现此目的？

我见过几个人使用Intent（如上面显示的问题）仅适用于Android而且没有使用flutter。这是平台特定代码的问题吗？

Answer 1

如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。希望它有所帮助。

Answer 2

为此做了一些锻炼。

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);
    }
  }
}

Flutter - 来自WebViewScaffold中显示的网页的电话

2 个答案: