WKWebView配置H5支付的前置准备

2024-01-07 10:15:48

在移动开发领域，提供流畅、安全的支付体验对增强用户体验至关重要。本文旨在介绍如何配置WKWebView以实现H5支付功能。通过添加自定义Scheme和编写相关代码，开发者能够轻松地将这一重要功能集成到应用中。

添加自定义Scheme

为了支持从外部网站向应用发送信息，首先需要在Info.plist文件中注册自定义的URL Scheme。这些Scheme允许网页通过特定格式的链接调用应用内的支付流程。在Info.plist中添加如下内容：

<key>CFBundleURLTypes</key>
<array>
    <dict>
        <key>CFBundleURLName</key>
        <string>com.example.appname</string>
        <key>CFBundleURLSchemes</key>
        <array>
            <string>payment</string>
        </array>
    </dict>
</array>

这里的<string>标签内的值可以根据项目需求自定义，例如将支付相关的Scheme命名为"payment"。这一步骤确保了当用户点击H5页面上的支付链接时，应用能够被正确启动。

自定义WKWebView以处理支付流程

完成注册Scheme后，下一步是编写自定义的WKWebView类来处理URL请求和响应。以下代码展示了一个简单的实现方法：

import WebKit

class CustomWebViewController: UIViewController, WKNavigationDelegate {
    var webView: WKWebView!

    override func loadView() {
        let webConfiguration = WKWebViewConfiguration()
        webView = WKWebView(frame: .zero, configuration: webConfiguration)
        webView.navigationDelegate = self
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()

        if let url = URL(string: "https://yourh5paymentwebsite.com") {
            let request = URLRequest(url: url)
            webView.load(request)
        }
    }

    // MARK: - WKNavigationDelegate

    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        if let url = navigationAction.request.url,
           let components = URLComponents(url: url, resolvingAgainstBaseURL: true),
           components.scheme == "payment" {

            // Handle the payment action here.
            handlePayment(with: url)

            decisionHandler(.cancel)
        } else {
            decisionHandler(.allow)
        }
    }

    func handlePayment(with url: URL) {
        // Implement your logic to process the payment information from the URL
        print("Handling payment with URL: \(url)")
    }
}

这段代码中，通过实现WKNavigationDelegate协议的webView(_:decidePolicyFor:decisionHandler:)方法，可以捕获到所有的URL导航请求。当检测到自定义Scheme（如"payment://"）时，会调用handlePayment(with:)方法来处理支付逻辑。