Swift - WKWebView、UIWebView与js交互 简单使用

之前开发过移动端与js交互，近期又遇到了同样的需求，所以干脆记录一下自己项目中用的知识点

前言

---

在日常开发中，webview的使用是很常见的。UIwebview和WKWebView我在项目都有用到，不过苹果现在主推的是WKWebView。因人而异，自己喜欢用哪个就用哪个。本文是记录一下我在项目中用webview做的一些操作。(本文为原创，转发请标明出处)

应用场景

---

webview和前端页面交互，就是移动端调用h5的方法，同时h5也可以调用移动端的方法。
我们前端有个需求，就是在我们移动端加载h5的时候，需要给网页传一个值，所以h5定义了一个方法，叫getuuid
这个方法名是我与前端工程师约定好的

webview给h5传值

---

1、UIWebView

func webViewDidFinishLoad(_ webView: UIWebView) {
        let User_UIID: String = KeychainTool.shared.getUUID() ?? ""
        let userName: String = UserModel.shared.username ?? ""
        self.webView.stringByEvaluatingJavaScript(from: "getuuid('\(User_UIID)','\(userName)')")
}

2、WKWebView

func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
     let User_UIID: String = KeychainTool.shared.getUUID() ?? ""
     let userName: String = UserModel.shared.username ?? ""
     self.webView.evaluateJavaScript("getuuid('\(User_UIID)','\(userName)')") { (dic, error) in
          print("\(dic)--\(error?.localizedDescription)---\(userName)--\(User_UIID)")
          if error == nil {
             传值成功
          }
    }
}

给h5传值就是这么简单粗暴

h5给webview传值

---

h5给webview传值的，WKWebView和UIWebView稍微有点不同

1、WKWebView

h5给webview传值，一样需要前端和移动端约定好一个方法名。
前端的代码，regcallBack就是双方约定的方法名

function register() {
    info就是前端给webview传的消息体
    webkit.messageHandlers.regcallBack.postMessage(info);
}

移动端的代码，需要在WKWebView初始化的地方加上设置，同时需要遵循代理 WKScriptMessageHandler

let config = WKWebViewConfiguration()
let userContent = WKUserContentController()
userContent.add(self, name: "regcallBack") regcallBack就是与前端约定好的方法名
config.userContentController = userContent
let myWebView = WKWebView(frame: .zero, configuration: config)

一旦h5传值过来了，这个代理方法就是可以直接获取h5传过来的值

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
   if message.name == "regcallBack" {
       print(message.body)
       message.body就是h5传过来的消息体
   }
}

2、UIWebView

前端代码

function sendParam(){
    var url="param:"+"丁丁风";
    document.location = url;//发送参数
 }

webview这边只需要在代理方法监听就行

func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebView.NavigationType) -> Bool {
      let url = request.url?.absoluteString
      if url?.contains("param") == true {
            如果包含，证明传值成功，接下来就是分割字符串了
      }
      return true
}

结束

---

跟h5交互在平常开发里面是经常遇到的，所以我在这里记录一下。希望可以帮到有需要的人