H5与原生的交互方式：
H5调用原生：原生解析h5的scheme，执行相应的方法
原生调用H5：H5中有一些公共方法，挂载在window上，供原生调用
H5与原生的交互方案：（iOS为例）
拦截url：和后端商议好，url中参数的规则是什么，从而执行相应的方法
JavaScriptCore(只适用于UIWebView，iOS7+)
WKScriptMessageHandler(只适用于WKWebView，iOS8+)
WebViewJavaScriptBridge(适用于UIWebView和WKWebView，第三方框架)，JockeyJS。
JockeyJS源码解析：
首先我们要明确几点问题，实现H5和原生的交互
主要解决以下问题：
1.H5和原生，是合适调用对方的方法的，是怎么调用的
2.如果有回调，回调是什么时候调用的，是怎么调用的
首先第一个流程：
原生调用H5，H5响应事件之后，给予回调
原生发送send方法
[Jockey send:@"show-image" withPayload:payload toWebView:_webView perform:^{ UIAlertView*alert = [[UIAlertViewalloc]initWithTitle:@"Image loaded" message:@"callback in iOS from JS event" delegate:self cancelButtonTitle:@"Score!" otherButtonTitles:nil]; [alertshow]; }];
send方法内部做了三件事情
1.存储原生的callbacks在jockey这个单例内
if (complete != nil) { [jockey.callbacks setValue:complete forKey:[messageId stringValue]]; }
2.调用h5的trigger方法，传递方法名和id
NSString *javascript = [NSString stringWithFormat:@"Jockey.trigger(\"%@\", %li, %@);", type, (long)[messageId integerValue], jsonString]; [webView stringByEvaluatingJavaScriptFromString:javascript];
eg: Jockey.trigger("show-image", 0, { "feed" : "https:\/\/th.bing.com\/th\/id\/R1fdf3a183158c62b91e690d8beee6ebe]"});
3. jockey.messageCount = @([jockey.messageCount integerValue] + 1); 修改messageCount的值
如果可以调用show-image说明在h5中必须有这个函数，H5定义show-image方法
Jockey.on("show-image",function(payload, complete) { complete();return false;});
on: function(type, fn) { if (!this.listeners.hasOwnProperty(type) || !this.listeners[type] instanceof Array) { this.listeners[type] = []; } this.listeners[type].push(fn); },
这个show-image会被存储在一个对应的listeners中
当原生调用H5方法的时候，H5回去listeners找到对应的type下的listenerList，是一个数组，然后开始执行，执行完之后，会调用dispatcher.sendCallback(messageId);
此时会重新加载webView
当WKWebView加载的时候，
var src = "jockey://" + type + "/" + envelope.id + "?" + encodeURIComponent(JSON.stringify(envelope));
src以一定的规则拼接好
加载h5的时候调用
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType { return [Jockey webView:_webView withUrl:[request URL]]; }
这个函数，此时url如下
jockey://callback/0?{"id":0,"host":""}
原生判断是callback类型去callbacks中找到之前存的callback，执行，从而结束回调
- (void)triggerCallbackForMessage:(NSNumber *)messageId { NSString *messageIdString = [messageId stringValue]; void (^ callback)() = [_callbacks objectForKey:messageIdString]; if (callback != nil) { callback(); } [_callbacks removeObjectForKey:messageIdString]; }
H5掉用实现类似。
总结如下：
-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType；
原生是在这个方法进行解析的。在webview加载frame之前
@property (strong, atomic) NSNumber *messageCount; @property (strong, nonatomic) NSMutableDictionary *listeners; @property (strong, nonatomic) NSMutableDictionary *callbacks;
主要依赖上述三个字段，
listeners：注册监听事件，用于H5的调用
callbacks: 发送事情的回调，用于发送事件之后进行回调
messageCount:帮助存储消息数，用于callback的存储和查找
对应的H5中也有三个字段
messageCount:0,
listeners: {},
callbacks: {},
作用与上同理
网友评论