JavaScript与Objective-C简单交互

以前在做JavaScript与Objective-C交互的时候只会用这个方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType；

拦截url，然后根据url里的信息做进一步处理。局限太大。
最近又做交互，与安卓一致使用js调原生方法。

因为交互比较简单，所以只是用了UIWebView和<JavaScriptCore/JavaScriptCore.h>，并没有涉及第三方框架。

iOS端需要的工作

1.引入头文件

#import <JavaScriptCore/JavaScriptCore.h>

2.需要一个上下文，作为连接js与native的桥梁

@interface ViewController ()<UIWebViewDelegate,JSNativeDelegate>

@property (nonatomic,strong) JSContext *jsContext;

@end


@implementation ViewController

#pragma mark - UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView {
    self.jsContext = [webView valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];
    self.jsContext[@"MobileClass"] = self;
}

@end

此处@"MobileClass"可以理解为这个桥梁的名字，js通过这个名字对应到我们指定的对象（在此处是self，即viewController），然后调用对象的方法。

3.自定义一个遵循<JSExport>的协议，，这里的方法就是可以供js调用的。

@protocol JSNativeDelegate <JSExport>

- (void)nativeLogMethod:(NSString *)jsonString;

@end

刚才的VC也要遵循此协议，并实现相应的方法。

4.实现协议方法。

#pragma mark - JSNativeDelegate
- (void)nativeLogMethod:(NSString *)jsonString {
    NSDictionary *jsonDic = [self dictionFromString:jsonString];
    NSLog(@"native log %@",jsonDic);
}

前端需要的工作

前端只需要通过“桥梁”调用本地方法即可

    <div>
        <input type="button" style="width:200px;height:30px" value="调用原生方法" onclick="callNative()">
    </div>

<script>
    function callNative() {
        var paramString = "{\"title\": \"标题\", \"content\": \"内容\"}";
        MobileClass.nativeLogMethod(paramString);
    }
</script>

以上就可以实现简单的交互，具体的方法等名称，前端、Android、iOS协商好就行。

更多的使用姿势

1.iOS的方法需要传两个或更多的参数

- (void)nativeLogMethodWithTwoParam:(NSString *)stringOne anotherParam:(NSString *)stringTwo {
    NSLog(@"native log (%@·%@)",stringOne,stringTwo);
}

js将方法名拼起来，连接字母大写即可

    function twoParamMethod() {
        var stringOne = "iOS";
        var stringTwo = "Android";
        MobileClass.nativeLogMethodWithTwoParamAnotherParam(stringOne,stringTwo);
    }

2.本地回调js方法

- (void)callBackMethod {    
    JSValue *jsCallBack = self.jsContext[@"jsMethod"];
    [jsCallBack callWithArguments:@[@"FBI Warning"]];
}

js代码

    function jsMethod(message) {
        alert(message);
    }

注：js调用本地方法，是在子线程中执行的，如果回调js方法时，不在那个线程回调，会有问题。。。

比如切到主线程回调js的alert，这个alert点OK不会消失。。。

3.js调用本地方法，是在子线程中执行的，如果本地需要在主线程执行一些操作（如改变UI），需要手动回到主线程。

demo地址：https://github.com/coderYMS/NativeJSDemo

不要脸地来求赞求star 😁