Swift 原生与webview交互

日常开发中，我们经常要在app中嵌入webview, 在此介绍一下原生与webview的交互，用到的是WKWebView

1. 创建WKWebView

//引入框架
import WebKit
class WebDetailViewController: UIViewController,WKScriptMessageHandler,WKNavigationDelegate,WKUIDelegate {
  var wkWebview : WKWebView?
  override func viewDidLoad() {
      super.viewDidLoad()
       //地址：
      let url = URL.init(string: "https://www.baidu.com")
      //请求：
      let request = URLRequest(url: url!);
       // 用户交互信息管理
       let userContent = WKUserContentController.init()
       //Touchealth 可以自定义，主要为了和h5交互提供标识
       userContent.add(self, name: "Touchealth")
       /*
       js端直接使用以下代码发送消息给原生
       window.webkit.messageHandlers.Touchealth.postMessage(message);
       */
      
      //初始化
       let config = WKWebViewConfiguration.init();
       config.userContentController = userContent;
       self.wkWebview = WKWebView.init(frame:CGRect.init(x: 0, y: 0, width: SCREENWIDTH, height: SCREENHEIGHT==812 ? SCREENHEIGHT-88 : SCREENHEIGHT-64), configuration: config);
        
       self.view.addSubview(self.wkWebview!);
      //不要忘记实现代理
       self.wkWebview?.navigationDelegate = self;
       self.wkWebview?.uiDelegate = self;
       self.wkWebview?.load(request)
       self.wkWebview?.sizeToFit()

        //添加进度观察者  为了实现顶部加载提示条
        if self.wkWebview != nil {
             self.wkWebview?.addObserver(self, forKeyPath: "estimatedProgress", options: .new, context: nil);
        }
  }

}

2. 代理方法 调用js 方法 发送数据给 webview, 实现传送登录token，领取代金券的id等信息。 传送的信息格式 可以和 web开发人员自己定。

  func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        //发送消息给web
        //这里只发送系统版本iOS
        let jsFunc = "appDidSendData('iOS')"
        self.wkWebview?.evaluateJavaScript(jsFunc, completionHandler: nil);
        //可以自定义数据格式：
        // let data = {"token": "dsjkk","platform" : "iOS"}
        //要把data转为 字符串   
   
    }

3. web端接收数据 和发送数据

  
  //web端实现以下方法
 function appDidSendData(data){
   //把app端传过来的data转为json对象
   //do someting 逻辑处理 登录状态处理等
 }
  
  //发送数据
  var message = { 
      "id" : 100
       ...
 }
  window.webkit.messageHandlers.Touchealth.postMessage(message);

4. app端接收web端数据(通过代理方法)

func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
      //message.body 即为web端传送数据
      //转换message.body使用
}

5. 创建 进度条

 //通过观察者模式监听
 override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
       if keyPath == "estimatedProgress"{
           self.progressView?.setProgress(Float((self.wkWebview?.estimatedProgress)!), animated: true);
           if (self.wkWebview?.estimatedProgress)! >= Double(1){
               // self.autherView.alpha = 1
               UIView.animate(withDuration: 0.3, delay: 0.5, options: .curveEaseInOut, animations: {
                   self.progressView?.alpha = 0;
               }, completion: { (finished) in
                   self.progressView?.progress = 0;
               })
           }
       }
       
   }
   
   func createProgressView (){
       self.progressView = UIProgressView.init(frame: CGRect.init(x: 0, y: 0, width: SCREENWIDTH, height: 3));
       self.progressView?.progressTintColor = UIColor.hexadecimalColor(hexadecimal: "#8c8c8c");//改变 变长那部分颜色；
       self.progressView?.trackTintColor = UIColor.clear;//改变背景色
       self.progressView?.progress = 0;
       self.view.addSubview(self.progressView!);
   }
//最后别忘了移除观察者