Xamarin Forms中如何在支付结果响应后自动关闭WebView

核心逻辑 #

整体实现的核心逻辑非常清晰：监听WebView的URL跳转行为，当检测到跳转的目标地址为你预先和支付渠道约定的return URL时，读取URL中携带的支付状态参数（成功/失败/取消等），处理完对应业务逻辑后直接销毁WebView页面即可。

Android 端实现 #

给WebView设置自定义WebViewClient，重写shouldOverrideUrlLoading方法拦截跳转：

webView.webViewClient = object : WebViewClient() {
    override fun shouldOverrideUrlLoading(view: WebView?, request: WebResourceRequest?): Boolean {
        val targetUrl = request?.url.toString()
        // 匹配你预先设置的return URL前缀
        if (targetUrl.startsWith("你的自定义return URL前缀")) {
            // 解析URL内的支付结果参数
            val payStatus = Uri.parse(targetUrl).getQueryParameter("status")
            // 处理对应支付逻辑
            when(payStatus) {
                "success" -> { /* 支付成功后续处理 */ }
                "fail" -> { /* 支付失败后续处理 */ }
                "cancel" -> { /* 支付取消后续处理 */ }
            }
            // 关闭当前WebView页面
            finish()
            return true
        }
        return super.shouldOverrideUrlLoading(view, request)
    }
}

注意事项：

• 提前开启WebView的JavaScript权限避免支付页面加载异常：webView.settings.javaScriptEnabled = true
• Java实现逻辑完全一致，仅语法规则调整即可

iOS 端实现 #

使用WKWebView时实现WKNavigationDelegate代理，重写跳转策略判断方法：

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
    guard let targetUrl = navigationAction.request.url?.absoluteString else {
        decisionHandler(.allow)
        return
    }
    // 匹配你预先设置的return URL前缀
    if targetUrl.hasPrefix("你的自定义return URL前缀") {
        // 解析URL内的支付结果参数
        if let urlComponents = URLComponents(string: targetUrl),
           let statusItem = urlComponents.queryItems?.first(where: { $0.name == "status" }) {
            let payStatus = statusItem.value
            // 处理对应支付逻辑
            switch payStatus {
            case "success": // 支付成功后续处理
            case "fail": // 支付失败后续处理
            case "cancel": // 支付取消后续处理
            default: break
            }
        }
        // 关闭当前WebView页面
        self.dismiss(animated: true)
        decisionHandler(.cancel)
        return
    }
    decisionHandler(.allow)
}

注意事项：

• 提前绑定代理：webView.navigationDelegate = self

Flutter 端实现 #

使用webview_flutter组件时，通过navigationDelegate拦截跳转：

WebView(
  initialUrl: "你的支付页面URL",
  javascriptMode: JavascriptMode.unrestricted,
  navigationDelegate: (NavigationRequest request) {
    if (request.url.startsWith("你的自定义return URL前缀")) {
      // 解析支付参数
      Uri uri = Uri.parse(request.url);
      String? payStatus = uri.queryParameters['status'];
      // 处理对应支付逻辑
      if (payStatus == 'success') {
        // 支付成功后续处理
      } else if (payStatus == 'fail') {
        // 支付失败后续处理
      }
      // 关闭当前WebView页面
      Navigator.pop(context);
      return NavigationDecision.prevent;
    }
    return NavigationDecision.navigate;
  },
)

特殊场景兼容 #

如果支付渠道不会主动跳转到你设置的return URL，而是通过JS回调返回支付结果，你可以通过JS与原生交互的通道接收支付状态回调，拿到结果后关闭WebView即可。
部分支付渠道会用自定义Scheme返回结果，按照上述逻辑拦截对应Scheme即可生效。

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