WebViewJavaScript iOS 与 js 交互

WebViewJavaScriptBridge简介

• GitHub上10K+的iOS与JavaScript交互框架
• 适用于WKWebView、 UIWebView以及WebView
• 优雅的实现OC与JS的交互,方便简洁

WebViewJavaScriptBridge原理简介

WebViewJavaScriptBridge交互原理

• 在iOS环境和JavaScript环境中都保存一个bridge对象，里面维持着requestId,callbackId,以及每个id对应的具体实现(JavaScript中的bridge对象由iOS原生传入)
• JavaScript通过url重定向，让iOS原生端主动拉取JavaScript的请求数据进行函数调用，然后iOS原生端再主动调用JavaScript代码，调用回调函数
• iOS原生端通过主动调用JavaScript的代码去进行函数调用，然后JavaScript再通过url重定向，调用回调函数

详细可以参考WebViewJavascriptBridge解析

iOS原生端集成WebViewJavaScriptBridge

• 使用CocoaPods
  • 在Podfile中加入pod 'WebViewJavascriptBridge', '~> 6.0'后indtall
• 手动导入
  • 下载下来后直接将WebViewJavascriptBridge文件夹拖入工程文件即可
• 使用
  • #import "WebViewJavascriptBridge.h" 导入头文件
  • @property WebViewJavascriptBridge* bridge; 添加属性bridge
  • [WebViewJavascriptBridge enableLogging]; 可选，是否打开调试
  • self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView]; 初始化bridge对象
  • [self.bridge setWebViewDelegate:self]; 设置代理

iOS原生与JavaScript交互

• Web端需要做的操作
  • 创建一个组件，用于存储原生传来的bridge对象（要在其他文件中使用）
    具体代码

   var Bridge = {}
   Bridge.install = function (Vue, options) {

    setupWebViewJavascriptBridge((bridge)=>{
      console.log(bridge.toString())
      Vue.prototype.$bridge = bridge

      // 需要将原生调js的方法在这里进行注册
      /**
       原生调用js的方法 名称 callJavaScript

       @param data 原生传来的参数
       @param responseCallback 回调函数
       */
       
      bridge.registerHandler('callJavaScript', data, function(data, responseCallback) {
        console.log("callJavaScript called with:", data)
        responseCallback(data)
      })
    })

    function setupWebViewJavascriptBridge(callback) {
      console.log('setBridge')
      if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
      if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
      window.WVJBCallbacks = [callback];
      var WVJBIframe = document.createElement('iframe');
      WVJBIframe.style.display = 'none';
      WVJBIframe.src = 'https://__bridge_loaded__';
      document.documentElement.appendChild(WVJBIframe);
      setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
 }
}
module.exports = Bridge; 

• 在app.js中引入组件
• 在需要调用原生方法的文件中

    // 判断是不是iOS端
    
    /**
      js调用原生的方法 名称 jsCallNative

      @param data 传给原生的参数
      @param responseCallback 回调函数
      */
    var vm = this
    if (vm.$bridge) {
        vm.$bridge.callHandler('jsCallNative', data, function(responceData){
        consol.log(responceData)
        })
   }

• iOS原生端需要做的操作
• js调用原生

  /**
     注册js调用原生的方法 名称 jsCallNative

     @param data js传来的参数
     @param responseCallback 回调函数
     */
  [self.bridge registerHandler:@"jsCallNative" handler:^(id data, WVJBResponseCallback responseCallback) {
      NSLog(@"%@---%@", data, responseCallback);
      [self saveUserInfo:data];
    }];

• 原生调用js

  /**
     原生调用js的方法 名称 callJavaScript

     @param data 传给js的参数
     @param responseCallback 回调函数
     */
 [self.bridge callHandler:@"callJavaScript" data:@{@"testKey":@"testValue"} responseCallback:^(id responseData) {
     NSLog(@"responseData is: %@", responseData);
}];

小结

• js调用原生需要在原生端注册相应方法，原生端调用js需要在js端注册相应方法
• 在方法中方法名是必须的参数，其余参数可传可不传