iOS原生App与H5页面交互笔记

清疚 2023-10-17 08:11 31阅读 0赞

> 作者：MikeZhangpy
> 
> 来源：简书 http://www.jianshu.com/p/4ed3e5ed99c6

最近在做一个项目用到了原生App与H5交互，之前有做过简单的H5页面直接调用原生方法的例子，就是利用UIWebView中的代理方法。

> //webview每次加载之前都会调用这个方法,利用该代理方法截取JS的href来调用原生的方法
> 
> \- (BOOL)webView:(UIWebView\*)webView shouldStartLoadWithRequest:(NSURLRequest\*)request navigationType:(UIWebViewNavigationType)navigationType

然而这次的交互要求是进行双向通信，即JS调用原生App的方法之后，原生App要讲相关参数信息返回给H5页面，H5页面接受到参数信息后做其他处理。

例：H5页面的发布信息按钮，在点击按钮后要在原生端判断用户是否登录，若没有登录则弹出原生登录页面，登录成功后将用户信息返回给H5页面，继续发布流程。

重点来了！

在这里推荐一个比较好的第三方库即：[WebViewJavascriptBridge][]

地址：https://github.com/marcuswestin/WebViewJavascriptBridge

通过使用该库可以轻松实现JS与原生交互。

> //初始化WebViewJavascriptBridge方法
> 
> \_bridge= \[WebViewJavascriptBridge bridgeForWebView:self.BookWebView webViewDelegate:self handler:^(id data,WVJBResponseCallback responseCallback) \{ 
> 
> \}\];
> 
> //原生与JS约定接口名为“testObjcCallback”，data是JS传递过来的信息，responseCallback来将信息传递给JS
> 
> \[\_bridge registerHandler:@"testObjcCallback" handler:^(id ?data,WVJBResponseCallback responseCallback) \{ 
> 
> responseCallback（"postInfomationToJS"）
> 
> \}\];

UIWebView页面信息的离线缓存

推荐一个比较好的第三方库[RNCachingURLProtocol][]，只需要在AppDelegate中加入下面方法即可。

> \[NSURLProtocolregisterClass:\[RNCachingURLProtocolclass\]\];

地址:https://github.com/rnapier/RNCachingURLProtocol

[WebViewJavascriptBridge]: https://github.com/marcuswestin/WebViewJavascriptBridge
[RNCachingURLProtocol]: https://github.com/rnapier/RNCachingURLProtocol