H5与原生的交互方案-JockeyJS

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: {},

作用与上同理