Swift H5唤起支付宝支付和微信支付

让你不再迷茫

网上有很多讲H5唤起支付宝和微信支付的文章,但是大部分都是粘贴代码(并且代码不完全),没有讲为什么,导致做这个功能的时候不好下手,下面我详细讲解一下应该怎么做,为什么要这么做,本文是Swift版本,OC可自行翻译.

首先,原理是当用户在H5想要唤起支付宝或者微信的时候,会出现弹框,请求前往,我们的核心就是拦截这条URL,然后转换成我们自己想要的URL,于是我们的一切操作都是在WKWebView的代理方面里面拦截

func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
}

• 支付宝支付

 func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        let urlString = navigationAction.request.url?.absoluteString
        // 阿里支付 ---> 发现带有alipays或alipay的链接就拦截下来,并重置URL,唤起APP
        if let urlString = urlString, urlString.hasPrefix("alipays://") || urlString.hasPrefix("alipay://") {
            decisionHandler(.cancel)
            guard let newURLS = URL(string: YTPayUtil.changeAliPayScheme(aliPayUrl: urlString)) else {
                return
            }
            toOpenUrl(url: newURLS)
            self.isload = true
            return
        }
        self.isload = false
        decisionHandler(.allow)
        return
    }

• 微信支付
  和支付宝的原理类似,但是复杂在第一次拦截以后需要在webview上重新加载,导致的后果就是要拦截第二次,拦截成功后就唤起APP

    func webView(_ webView: WKWebView, decidePolicyFor navigationAction: WKNavigationAction, decisionHandler: @escaping (WKNavigationActionPolicy) -> Void) {
        let urlString = navigationAction.request.url?.absoluteString
        //1.拦截第一次,并在webview重新加载,拦截的目的是为了换我们自己的redirect_url
        if urlString?.range(of: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb") != nil && !self.isload{
            if var mUrlStr = urlString {
                decisionHandler(.cancel)
                // 替换掉redirect_url
                mUrlStr = mUrlStr.replacingOccurrences(of: "redirect_url=", with: "redirect_url_app=")
                guard let newURLS = URL(string: mUrlStr) else {
                    return
                }
                var mRequest = URLRequest.init(url: newURLS, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 60)
                mRequest.setValue("\(kWechatScheme)://", forHTTPHeaderField: "Referer")
                webView.load(mRequest)
                self.isload = true
                return
            }
        }
        2.发现weixin://wap/pay开发的链接,说明是微信支付的链接,拦截下来并唤起APP
        if urlString?.range(of: "weixin://wap/pay?") != nil {
            self.isload = false
            decisionHandler(.cancel)
            if let mUrlStr = urlString, let openWX = URL(string: mUrlStr) {
                toOpenUrl(url: openWX)
            }
            return
        }
        
        self.isload = false
        decisionHandler(.allow)
        return
    }

• 公用方法

func toOpenUrl(url: URL) {
        if (UIApplication.shared.canOpenURL(url)) {
            UIApplication.shared.openURL(url)
        }
        // 回到上一级页面
        // 1.防止因为load上面的微信支付url而出现的白屏
        // 2.防止停留在支付宝支付确认页面
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {
            if self.wkWebView?.canGoBack ?? false {
                self.wkWebView?.goBack()
            }
        }
    }