iOS WKWebView H5微信支付跳转

iOS WKWebView H5微信支付跳转

---

需求：iOS客户端实现嵌入H5进行微信支付跳转到微信客户端，支付完成后再跳转回我们的APP,解决WKWebView无法跳转回APP的BUG.

---

阅读前提:

• 了解WKWebView基本初始化及使用
• 了解如何利用URL Schemes进行应用间跳转
• 公司或个人已经在微信后台注册了一级域名

---

GitHub地址(附代码) : iOS WKWebView H5微信支付跳转

地址 : iOS WKWebView H5微信支付跳转

博客地址 : iOS WKWebView H5微信支付跳转

掘金地址 : iOS WKWebView H5微信支付跳转

---

更新说明

2019.1.3

• 首先对所有解析的URL进行decode，因为服务器端可能进行encode导致带有redirect url部分无法被正确的加载
• 修改替换redirect url参数方式,因为redirect url可能含有&等特殊字符，导致原先方法识别错误，当然前提是必须把redirect url放到url的最后
• 对一些服务器加载的特殊Url(非http/https开头)进行处理，防止进入到微信跳回后重定向地址的逻辑中.

---

注意：如对WKWebView基本的初始化代理方法不了解可自行百度谷歌，解释众多，本文只针对了解基础后实现。

1.在项目的Info.plist中添加一个URL Schemes（用于跳回我们项目），如下图所示

URL Schemes

其中我们只要关心URL Schemes中item的名字例如 xdx.xiaodongxie.cn

• xdx 为前缀，可任意填写
• xiaodongxie.cn为你们公司在微信后台注册的一级域名

注意：xiaodongxie.cn一级域名不可随意填写，否则网页将报错：商家参数格式错误，请联系商家解决.

2.添加WKNavigationDelegate代理，并实现重定向代理方法

3.通过拦截微信链接以实现跳转

3-1. 拦截微信支付地址

前缀https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb的网址，该网址即为进行微信支付

3-2. 解决完成微信支付后无法跳转回APP

拦截后我们需要首先关注在原始地址中是否含有redirect_url=字符串，如果含有该字符串则说明你们后台人员是利用该字符串在微信支付完成后跳转到支付完成的界面.而我们也需要利用该字段以实现支付完成后跳转回我们的APP.

• 如果包含redirect_url=字段，我们需要先记住后台重定向的地址，然后将其替换成我们配置好的URL schemes以实现跳转回我们的APP.然后在跳转回我们APP之后我们会手动再加载一次原先重定向的URL地址。
• 如果不包含redirect_url=字段，我们只需要添加该字段到原始URL最后面即可

3-3. 使用[[UIApplication sharedApplication] openURL:request.URL];即可打开微信客户端

注意

• 我们需要判断微信地址的同时判断“redirect_url=xdx.%@://”,因为我们在第一次检测到后会重新加载该地址，该地址中也含有 https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb，会形成循环冲突，所以判断条件如下
• 如我们项目中有支付完成的重定向地址，我们可以在跳转前即加载该地址，否则我们在回到APP后会有明显的加载过程，界面不友好
• 一般跳转到其他APP时，地址不是以http或https开头，所以我们在最后的判断中以此为依据,但注意如果服务器端加载错误的地址可能会走入此逻辑，所以必须对特定的scheme进行处理

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    
    NSURLRequest *request        = navigationAction.request;
    NSString     *scheme         = [request.URL scheme];
    // decode for all URL to avoid url contains some special character so that it wasn't load.
    NSString     *absoluteString = [navigationAction.request.URL.absoluteString stringByRemovingPercentEncoding];
    NSLog(@"Current URL is %@",absoluteString);
    
    static NSString *endPayRedirectURL = nil;
    
    // Wechat Pay, Note : modify redirect_url to resolve we couldn't return our app from wechat client.
    if ([absoluteString hasPrefix:@"https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb"] && ![absoluteString hasSuffix:[NSString stringWithFormat:@"redirect_url=xdx.%@://",CompanyFirstDomainByWeChatRegister]]) {
        decisionHandler(WKNavigationActionPolicyCancel);
        
#warning Note : The string "xiaodongxie.cn://" must be configured by wechat background. It must be your company first domin. You also should configure "URL types" in the Info.plist file.
        
        // 1. If the url contain "redirect_url" : We need to remember it to use our scheme replace it.
        // 2. If the url not contain "redirect_url" , We should add it so that we will could jump to our app.
        //  Note : 2. if the redirect_url is not last string, you should use correct strategy, because the redirect_url's value may contain some "&" special character so that my cut method may be incorrect.
        NSString *redirectUrl = nil;
        if ([absoluteString containsString:@"redirect_url="]) {
            NSRange redirectRange = [absoluteString rangeOfString:@"redirect_url"];
            endPayRedirectURL =  [absoluteString substringFromIndex:redirectRange.location+redirectRange.length+1];
            redirectUrl = [[absoluteString substringToIndex:redirectRange.location] stringByAppendingString:[NSString stringWithFormat:@"redirect_url=xdx.%@://",CompanyFirstDomainByWeChatRegister]];
        }else {
            redirectUrl = [absoluteString stringByAppendingString:[NSString stringWithFormat:@"&redirect_url=xdx.%@://",CompanyFirstDomainByWeChatRegister]];
        }
        
        NSMutableURLRequest *newRequest = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:redirectUrl] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:XDX_URL_TIMEOUT];
        newRequest.allHTTPHeaderFields = request.allHTTPHeaderFields;
        newRequest.URL = [NSURL URLWithString:redirectUrl];
        [webView loadRequest:newRequest];
        return;
    }
    
    // Judge is whether to jump to other app.
    if (![scheme isEqualToString:@"https"] && ![scheme isEqualToString:@"http"]) {
        decisionHandler(WKNavigationActionPolicyCancel);
        if ([scheme isEqualToString:@"weixin"]) {
            // The var endPayRedirectURL was our saved origin url's redirect address. We need to load it when we return from wechat client.
            if (endPayRedirectURL) {
                [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:endPayRedirectURL] cachePolicy:NSURLRequestUseProtocolCachePolicy timeoutInterval:XDX_URL_TIMEOUT]];
            }
        }else if ([scheme isEqualToString:[NSString stringWithFormat:@"xdx.%@",CompanyFirstDomainByWeChatRegister]]) {
            
        }
        
        BOOL canOpen = [[UIApplication sharedApplication] canOpenURL:request.URL];
        if (canOpen) {
            [[UIApplication sharedApplication] openURL:request.URL];
        }
        return;
    }
    
    decisionHandler(WKNavigationActionPolicyAllow);
}