WebViewJavaScriptBridge簡(jiǎn)介

• GitHub上10K+的iOS與JavaScript交互框架
• 適用于WKWebView、 UIWebView以及WebView
• 優(yōu)雅的實(shí)現(xiàn)OC與JS的交互,方便簡(jiǎn)潔

WebViewJavaScriptBridge原理簡(jiǎn)介

WebViewJavaScriptBridge交互原理

• 在iOS環(huán)境和JavaScript環(huán)境中都保存一個(gè)bridge對(duì)象单雾，里面維持著requestId,callbackId,以及每個(gè)id對(duì)應(yīng)的具體實(shí)現(xiàn)(JavaScript中的bridge對(duì)象由iOS原生傳入)
• JavaScript通過(guò)url重定向，讓iOS原生端主動(dòng)拉取JavaScript的請(qǐng)求數(shù)據(jù)進(jìn)行函數(shù)調(diào)用溺职，然后iOS原生端再主動(dòng)調(diào)用JavaScript代碼塞淹，調(diào)用回調(diào)函數(shù)
• iOS原生端通過(guò)主動(dòng)調(diào)用JavaScript的代碼去進(jìn)行函數(shù)調(diào)用剪菱，然后JavaScript再通過(guò)url重定向，調(diào)用回調(diào)函數(shù)

詳細(xì)可以參考WebViewJavascriptBridge解析

iOS原生端集成WebViewJavaScriptBridge

• 使用CocoaPods
  • 在Podfile中加入pod 'WebViewJavascriptBridge', '~> 6.0'后indtall
• 手動(dòng)導(dǎo)入
  • 下載下來(lái)后直接將WebViewJavascriptBridge文件夾拖入工程文件即可
• 使用
  • #import "WebViewJavascriptBridge.h" 導(dǎo)入頭文件
  • @property WebViewJavascriptBridge* bridge; 添加屬性bridge
  • [WebViewJavascriptBridge enableLogging]; 可選纹笼，是否打開調(diào)試
  • self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView]; 初始化bridge對(duì)象
  • [self.bridge setWebViewDelegate:self]; 設(shè)置代理

iOS原生與JavaScript交互

• Web端需要做的操作
  • 創(chuàng)建一個(gè)組件纹份，用于存儲(chǔ)原生傳來(lái)的bridge對(duì)象（要在其他文件中使用）
    具體代碼

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

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

      // 需要將原生調(diào)js的方法在這里進(jìn)行注冊(cè)
      /**
       原生調(diào)用js的方法 名稱 callJavaScript

       @param data 原生傳來(lái)的參數(shù)
       @param responseCallback 回調(diào)函數(shù)
       */
       
      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中引入組件
• 在需要調(diào)用原生方法的文件中

    // 判斷是不是iOS端
    
    /**
      js調(diào)用原生的方法 名稱 jsCallNative

      @param data 傳給原生的參數(shù)
      @param responseCallback 回調(diào)函數(shù)
      */
    var vm = this
    if (vm.$bridge) {
        vm.$bridge.callHandler('jsCallNative', data, function(responceData){
        consol.log(responceData)
        })
   }

• iOS原生端需要做的操作
• js調(diào)用原生

  /**
     注冊(cè)js調(diào)用原生的方法 名稱 jsCallNative

     @param data js傳來(lái)的參數(shù)
     @param responseCallback 回調(diào)函數(shù)
     */
  [self.bridge registerHandler:@"jsCallNative" handler:^(id data, WVJBResponseCallback responseCallback) {
      NSLog(@"%@---%@", data, responseCallback);
      [self saveUserInfo:data];
    }];

• 原生調(diào)用js

  /**
     原生調(diào)用js的方法 名稱 callJavaScript

     @param data 傳給js的參數(shù)
     @param responseCallback 回調(diào)函數(shù)
     */
 [self.bridge callHandler:@"callJavaScript" data:@{@"testKey":@"testValue"} responseCallback:^(id responseData) {
     NSLog(@"responseData is: %@", responseData);
}];

小結(jié)

• js調(diào)用原生需要在原生端注冊(cè)相應(yīng)方法，原生端調(diào)用js需要在js端注冊(cè)相應(yīng)方法
• 在方法中方法名是必須的參數(shù)，其余參數(shù)可傳可不傳