WKWebView系列--Swift与JS交互及iOS调用Qui

声明：此文仅为工作笔记，仅供参考，大神请绕道

• 背景
  APP中需要内嵌一个富文本编辑器，经过一翻考究，最方便快捷的方法就是用webview去处理，所以就有了这篇工作笔记，JS部分的代码可能会有不规范的情况，本人不是前端工程师还请多多指教
  关于富文本编辑器，我用的是Quill

• 需求

  • 可以编辑富文本然后发送到Backend
  • 获取Backend返回的数据，显示在富文本编辑器中，进行再编辑

• 需求分析
  我们在JS里面需要完成两个方法，一个是获取富文本，一个是显示富文本
  我将他们理解成一个是get，一个是set
  在完成JS的get/set后，在iOS项目中调用方法进行交互

  • JS部分

    • 获取编辑后的富文本

    function getContents() {
        return editor.root.innerHTML
    }
    

    • 将获取到的HTML显示为富文本
      这里需要讲一下，我并没有调用官方的setContents方法，因为Backend返回的是富文本转换成HTML后的数据，所以直接设置innerHTML就可以解决问题

    function setHTMLs(html) {
        editor.root.innerHTML = html
    }
    

    到这里，对JS的加工就完成了，可以在运行debug一下

  • 与WKwebview交互

    • iOS调用JS方法

     open func evaluateJavaScript(_ javaScriptString: String, 
                                   completionHandler: ((Any?, Error?) -> Void)? = nil)
    

    如果需要在WKWebView中调用JS方法，我们可以调用这个方法，JavaScriptString指的是JS方法名，这里传的是字符串所以一定要确保方法名是正确无误的

    func getJSContents() {
      let js = "getContents()"
      webview.evaluateJavaScript(js) { (response, error) in
          guard let response = response as? String? else { return }
          print(response?.description ?? "")
      }
    }
    

    • JS调用iOS方法
      网上有许多JS调用iOS的实现方法，这里采用的是比较简单的，通过webkit的messageHandlers进行传递，此处的trackAppEvent是iOS代码中的名字，注意区分大小写区分，如果需要传参数，需要对参数进行拼接

    HTML代码
    //无参数
    function clickImage() {
         webkit.messageHandlers.trackAppEvent.postMessage("null")
    }
    
    //有参数
    function clickImage() {
         propertiesJson = '{"dsaf":"dfdf", "content_id":"123456"}'
         webkit.messageHandlers.trackAppEvent.postMessage("eventNameACE" + "+" + propertiesJson)
    }
    

    iOS代码
    //无参数
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      if message.name == "trackAppEvent" {
          // your logic
      }
    }
    
    //有参数
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      if message.name == "trackAppEvent" {
        // 对参数进行拼接
          guard let messageBody = message.body as? String,
          let eventName = messageBody.components(separatedBy: "+").first,
          let propertiesJson = messageBody.components(separatedBy: "+").last else { return }
          trackAppEvent(eventName: eventName, propertiesJson: propertiesJson)
      }
    }
    

到这里整个功能需求也基本完成了，剩下就是与现有项目整合了

• Tips
  • 如果添加超链接，一定要带上https，否则编辑器会认定url无效，设置不了地址的
    以防用户漏掉输入https，可以在html文件里加入一下代码

  Link.sanitize = function(url) {
    // 处理逻辑
    lowerCaseURL = url.toLowerCase()
      if (lowerCaseURL.startsWith('https')) {
          return lowerCaseURL
      } else {
        return 'https://' + lowerCaseURL
        }
   }
  

  • 如果发现toolbar选择状态有问题，请把版本升级到1.3.0以上，他们在这个版本fix了这个问题，但是有些嵌套的<p>便签在1.1.6以后会无法显示，所以可以使用覆盖css的方法，将一下代码加在style里面

  @media (pointer: coarse) {
            .ql-snow.ql-toolbar button:hover:not(.ql-active),
            .ql-snow .ql-toolbar button:hover:not(.ql-active) {
                color: #444;
            }
  
            .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,
            .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,
            .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,
            .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill {
                fill: #444;
            }
  
            .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,
            .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,
            .ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,
            .ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter {
                stroke: #444;
            }
        }
  

---

如果大家有其他解决方案欢迎留言交流
支持原创，版权所有
未经授权请勿转载