H5与原生的交互方案-JockeyJS
发布网友
发布时间：2022-12-30 12:04
共1个回答
热心网友
时间：2023-10-30 07:24
原生调用H5：H5中有一些公共方法，挂载在window上，供原生调用
拦截url：和后端商议好，url中参数的规则是什么，从而执行相应的方法
JavaScriptCore(只适用于UIWebView，iOS7+)
WKScriptMessageHandler(只适用于WKWebView，iOS8+)
WebViewJavaScriptBridge(适用于UIWebView和WKWebView，第三方框架)，JockeyJS。
首先我们要明确几点问题，实现H5和原生的交互
主要解决以下问题：
1.H5和原生，是合适调用对方的方法的，是怎么调用的
2.如果有回调，回调是什么时候调用的，是怎么调用的
首先第一个流程：
原生调用H5，H5响应事件之后，给予回调
原生发送send方法
send方法内部做了三件事情
1.存储原生的callbacks在jockey这个单例内
2.调用h5的trigger方法，传递方法名和id
eg: Jockey.trigger("show-image", 0, { "feed" : "https:\/\/th.bing.com\/th\/id\/R1fdf3a183158c62b91e690d8beee6ebe]"});
如果可以调用show-image说明在h5中必须有这个函数，H5定义show-image方法
这个show-image会被存储在一个对应的listeners中
当原生调用H5方法的时候，H5回去listeners找到对应的type下的listenerList，是一个数组，然后开始执行，执行完之后，会调用dispatcher.sendCallback(messageId);
此时会重新加载webView
当WKWebView加载的时候，
src以一定的规则拼接好
加载h5的时候调用
这个函数，此时url如下
jockey://callback/0?{"id":0,"host":""}
原生判断是callback类型去callbacks中找到之前存的callback，执行，从而结束回调
H5掉用实现类似。
总结如下：
-( BOOL )webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType；
原生是在这个方法进行解析的。在webview加载frame之前
主要依赖上述三个字段，
listeners：注册监听事件，用于H5的调用
callbacks: 发送事情的回调，用于发送事件之后进行回调
messageCount:帮助存储消息数，用于callback的存储和查找
对应的H5中也有三个字段
messageCount:0,
listeners: {},
callbacks: {},
作用与上同理
