iOS与JS交互之UIWebView-JSExport协议

前言
　　“iOS与JS交互”。iOS指iOS原生代码（文章只有OC示例），JS指WEB前端（不单指JavaScript），交互指JS调用iOS和iOS调用JS。将iOS与JS交互总结成了6种方式，并将逐一介绍。
目录如下：
一、JS调用iOS：

  • 实现逻辑：点击JS的登录按钮，JS将登录成功后的token数据传递给iOS，iOS将收到的数据展示出来。

  • 实现效果：


     
    JS调用iOS实现效果

  • JS代码：

//! 登录按钮
<button onclick = "login()" style = "font-size: 18px;">登录</button>
//! 登录
function login() {
  var token = "js_tokenString";
  loginSucceed(token);
}

//! 登录成功
function loginSucceed(token) {
  var action = "loginSucceed";
  OCJSBridge.jsToOc(action, token);
}
  • iOS代码：
//! 导入JavaScriptCore框架头文件
#import <JavaScriptCore/JavaScriptCore.h>

@protocol OCJSExport <JSExport>

//! 为OC的-jsToOC:params:方法起个JS认识的别名jsToOc
JSExportAs(jsToOc, - (void)jsToOc:(NSString *)action params:(NSString *)params);

@end

//! UIWebViewJSExportController遵守OCJSExport协议
@interface UIWebViewJSExportController () <UIWebViewDelegate, OCJSExport>
#pragma mark - JSExport functions

//! 实现OCJSExport协议的方法
- (void)jsToOc:(NSString *)action params:(NSString *)params {
    
    dispatch_async(dispatch_get_main_queue(), ^{
        [UIWebViewJSExportController showAlertWithTitle:action message:params cancelHandler:nil];
    });
}
#pragma mark - UIWebViewDelegate

//! UIWebView在每次加载请求完成后会调用此方法
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    
    //! 获取JS代码的执行环境/上下文/作用域
    JSContext *context = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

    //! 在context注册OCJSBridge对象为self
    context[@"OCJSBridge"] = self;//!< 有循环引用问题
}
  • 实现原理：
    1、JS与iOS约定好OCJSBridge类名和jsToOc方法，作为JS调用iOS的入口OCJSBridge.jsToOc；
    2、iOS创建遵守JSExport协议的OCJSExport协议，在该协议中声明-jsToOc:params:方法(起个别名jsToOc)；
    3、UIWebViewJSExportController遵守OCJSExport协议，实现该协议中的-jsToOc:params:方法；
    4、iOS通过[webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"]获取JS代码的上下文JSContext;
    5、iOS通过context[@"OCJSBridge"] = self;在context注册OCJSBridge对象为self(UIWebViewJSExportController的实例)；
    3、JS调用OCJSBridge.jsToOc方法，iOSUIWebViewJSExportController的-jsToOc:params:方法会响应JS的调用请求和参数；

PS1：JS的方法命名规则与OC不一样，当OCJSExport协议中的方法有多个参数时，需要使用JSExportAs(<#PropertyName#>, <#Selector#>)为OC方法起个别名。否则，JS就需要很别扭的使用OCJSBridge.jsToOcParams来调用OC的-jsToOc:params:方法（无参数和单参数时可不起别名）。

 

PS2：context[@"OCJSBridge"] = self;会有循环引用问题，导致self的-dealloc方法不被执行。因为JS中没有弱引用，所以__weak在这里不起作用。一般来说，可以使用单独的类来处理OCJSExport协议的相关方法，以解决此问题（比如：context[@"OCJSBridge"] = [OCJSBridge new];）。

二、iOS调用JS：

iOS调用JS方式与上篇文章一致，都是通过JavaScriptCore框架提供的能力来实现的：

1、使用JSContext的-evaluateScript:方法执行一段JS代码ocToJs('loginSucceed', 'oc_tokenString')；

2、先通过[context[@"ocToJs"]获取到JS的ocToJs方法对应的JSValue，然后使用JSValue的-callWithArguments:方法调用JS的ocToJs方法。

3、获取工程源码

posted on 2019-05-28 18:21  梁飞宇  阅读(1353)  评论(0)    收藏  举报