以前在做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 😁
