解决iOS微信H5支付跳转微信后不返回App问题(Swift-WKWebview)(转)

  • 问题分析

    正常的H5支付流程如下

     

    按照上面的支付流程会出现 App -> 微信 -> 支付 -> 点击 完成 -> safari访问redirect_url设置的URL,这种流程其实用户体验是有点糟糕的,我们期望是 App -> 微信 -> 支付 -> 点击 完成 -> App访问redirect_url设置的URL

     

     

    问题分析到上面已经非常明了了,无非就是拦截处理,下面讲讲具体的实施。

  • 问题分析

    根据上面的分析解决的思路应该非常的清晰

     

     

    拦截请求

    首先在decidePolicyFor 回调里拦截支付的请求拦截的字符串:https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb 如果包含了该链接做如下处理,isload变量是控制是否是第一次没有修改redirect_url参数的请求防止重复请求

      if urlString?.range(of: "https://wx.tenpay.com/cgi-bin/mmpayweb-bin/checkmweb") != nil && !self.isload{
          if let mUrlStr = urlString{
              let array : Array = mUrlStr.components(separatedBy: "redirect_url=")
              self.redirect_url =  array[1]
              let rs = "\(WXH5SchemeURL)://".urlEncoded()
              let mNewUrl = array[0] + "redirect_url=\(rs)"
              let newURLS = URL(string: mNewUrl)
              var mRequest = URLRequest.init(url: newURLS!, cachePolicy: .useProtocolCachePolicy, timeoutInterval: 60)
              mRequest.setValue("\(WXH5SchemeURL)://", forHTTPHeaderField: "Referer")
              webView.load(mRequest)
              self.isload = true
              decisionHandler(.cancel)
              return
          }
      }
      self.isload = false
      decisionHandler(.allow)
      }
    复制代码

    拦截weixin://wap/pay? 打开微信

      if urlString?.range(of: "weixin://wap/pay?") != nil{
          if let mUrlStr = urlString{
              let openWX = URL(string: mUrlStr)
              if (UIApplication.shared.canOpenURL(openWX!)){
                  if #available(iOS 10.0, *){
                      UIApplication.shared.open(openWX!, options: [UIApplicationOpenSettingsURLString:false], completionHandler: nil)
                  }else{
                      UIApplication.shared.openURL(openWX!)
                  }
              }
              decisionHandler(.cancel)
              return
          }
      }
    复制代码

    这一步的话没甚好介绍的就是拦截打开微信支付即可。

    在项目设置Scheme链接用于支付完后返回App

    具体操作如下图

     

     

    到这一步已经成功了一大半了,你会发现现在支付成功后能返回App了但是返回的时候webView是白屏。白屏其实就是网页没有任何请求导致的,接下来我们就要使用上步提前记录好后台给的redirect_url的url了。

    在AppDelegate里监听url.scheme的值

    在AppDelegate里监听url.scheme的值是否为我们之前设置好的xxxx.com 如果是xxxx.com 发起通知 通知webview加载提前记录好的redirect_url的url了

      if ([url.scheme rangeOfString:@"quanzidian.net"].length!=0) {
      	[NSNotificationCenter defaultCenter] postNotificationName:@"WX_H5_PAY" object:nil];
      	return YES;
      }
    复制代码

    在wkWebView接收通知

      NotificationCenter.default.addObserver(self, selector: #selector(goBackWhitWXPay), name: NSNotification.Name(rawValue: "WX_H5_PAY"), object: nil)
    复制代码

    重新刷新WKWebview

      @objc func goBackWhitWXPay(){
      	if !self.redirect_url.isEmpty{
          	self.request = URLRequest(url: URL(string: self.redirect_url)!)
          	redirect_url = ""
      	}
      }
    复制代码

    项目使用的oc/Swift 混编有些地方和你使用的语言不一致时请自行模仿做写。

    到这里微信H5支付所有的问题就完美解决了 唯一的坑就是在截取请求时,重写redirect_url时注意一定时授权的URL://的协议。

    更多详情请访问https://siterzzz.github.io

 
 
 
 

作者:Siter
链接:https://juejin.im/post/5b45af6ae51d45198e7217fd
posted @ 2019-10-17 17:58  panchanggui  阅读(4381)  评论(0编辑  收藏  举报