Flutter中使用url_launcher打开Webview完成支付后如何关闭返回上一页

这个需求完全可以实现，需要Web端和移动端配合完成，无法单端独立处理。

核心分工 #

• Web端：支付流程完成后，主动跳转到双方提前约定好的专属回调地址，比如自定义Scheme地址yourapp://payment/result，或者固定路径/payment/complete，可在地址参数中携带支付结果、订单ID等业务信息
• 移动端：监听应用内WebView的页面跳转事件，识别到约定的回调地址时，直接关闭WebView即可自动返回上一级Flutter页面，同时可解析地址参数处理后续业务逻辑

代码改造示例 #

你当前使用的launch方法在url_launcher 6.1.0及以上版本已标记废弃，推荐升级为launchUrl实现，改造后代码如下：

import 'package:url_launcher/url_launcher.dart';

_launchURL(String onboardingLink) async {
  final Uri uri = Uri.parse(onboardingLink);
  if (await canLaunchUrl(uri)) {
    await launchUrl(
      uri,
      webViewConfiguration: const WebViewConfiguration(
        enableJavaScript: true,
        forceWebView: true,
      ),
      navigationDelegate: (NavigationRequest request) {
        // 匹配约定的支付完成回调地址
        if (request.url.startsWith('yourapp://payment/result')) {
          // 关闭当前应用内WebView，自动返回上一级页面
          closeInAppWebView();
          // 可在此处解析request.url的参数，处理支付结果逻辑
          return NavigationDecision.prevent;
        }
        // 非回调地址正常加载
        return NavigationDecision.navigate;
      },
    );
  } else {
    throw 'Could not launch $onboardingLink';
  }
}

补充说明 #

如果你使用的是url_launcher旧版本，没有navigationDelegate参数，可以替换为webview_flutter插件自行实现WebView页面，对页面跳转的可控性更高，更适合支付这类强流程管控的场景。
建议额外补充用户主动关闭WebView、页面加载失败等边界场景的支付状态同步逻辑，避免业务异常。

内容的提问来源于stack exchange，提问作者Infaz