JS與Native交互初識

本文將介紹iOS客戶端UIWebView與JavaScript進行交互,實現數據傳輸,界面切換,控件顯示等功能：

需求背景

客戶端開發的優缺點:
優點: 交互流暢,交互性強,對於複雜手勢和精彩動畫的支持到位,可以給用戶更好的交互體驗.
缺點:開發成本高,上線時間長,可及時修改性差

Web開發的優缺點:
優點:靈活性高,上線不受蘋果審覈限制
缺點:與客戶端原生控件相比,交互較差

交互方式

兩個問題:
1.Native(UIWebView)能否直接調用JS方法?
YES
2.JS是否可以直接調用Native方法?
NO

Native調用JS方法
核心方法:
-(NSString*)stringByEvaluatingJavaScriptFromString:(NSString *)script;
使用該方法,等同於直接執行script語句

JS調用Native方法
核心技術:
JS通過觸發UIWebViewshouldStartLoadWithRequest方法(修改src等方式),Native通過約定的方法進行重定向,客戶端實現響應操作.常用的方法有以下兩種
1.Native攔截URL,異步調用
2.Native註冊協議,通過攔截canInitWithRequest,可以選擇同步或者異步

簡化操作

上述文中看出,交互難點在與JS調用Native方法,目前比較好的第三方類有UIWebViewJavaScriptBridge.

UIWebViewJavaScriptBridge

以UIWebView爲載體,通過bridge溝通JS和Native.
使用方法:JS端和Native端,均實例化一個bridge對象,通過註冊方法(registerHandler)和調用方法(callHandler)實現相互調用
想要調用方法,被調用者必須註冊這個方法,保證方法名一直即可,然後在方法的回調內進行操作

Cordova

CordovaActivity：Cordova Activity入口，已實現PluginManager、WebView的相關初始化工作, 只需繼承CordovaActivity實現自己的業務需求。
PluginManager： 插件管理器
ExposedJsApi ：javascript調用Native， 通過插件管理器PluginManager 根據service找到具體實現類。
NativeToJsMessageQueue：Native調用javascript，主要包括三種方式：loadUrl 、 輪詢、反射WebViewCore執行js

UIWebViewJavaScriptBridge的使用

原理分析
對bridge進一步封裝,註冊約定好的方法,並進行實現
舉例:
實例化

[WebViewJavascriptBridge enableLogging];
self.bridge = [WebViewJavascriptBridge bridgeForWebView:webView webViewDelegate:self handler:^(id data, WVJBResponseCallback responseCallback) {

}];

註冊方法

[self.bridge registerHandler:@"share" handler:^(id data, WVJBResponseCallback responseCallback) {
    NSLog(@"data--%@",data);
    [self share:data];
    responseCallback(@NO);
}];

調用JS方法

[self.bridge  callHandler:@"groupMessages" data:@"test" responseCallback:^(id responseData) {
        NSLog(@"groupMessages%@",responseData);
    }];


                                                                                                     杏樹林研發  趙亞男