原创教程:Charles抓包与解析 (四) : H5和Native交互的实现

版权声明：本文为博主原创文章，未经博主允许不得转载。

教程合辑:

1.原创教程:Charles抓包与解析 (一) : Charles安装及使用
2.原创教程:Charles抓包与解析 (二) : 某App抓包数据分析(上)
3.原创教程:Charles抓包与解析 (三) : 某App抓包数据分析(下)
4.原创教程:Charles抓包与解析 (四) : H5和Native交互的实现

这是最后一节教程了,前面极其详(啰)细(嗦)地写了如何抓包分析接口，浅显易懂，入门选手也能看明白。

最后这节介绍一下这个App里的H5和Native交互的实现。

1.分析

点这个app的tabviewcell会加载一个web
比如这个
http://www.maimenghuo.com/posts/19698/content
web里描述了一些商品的信息，每个都带有一个“查看详情”按钮，点一下会跳转到淘宝购买的页面，

但是！！！

在app里点击这个按钮会push出一个原生的VC,来展示这个商品的详细信息。
所以此处用到了H5和Native的交互。

2.原理

原App的做法暂不深究，但是我们显然可以用自己的方法来实现这一效果。

024479F0-130C-4DE1-B47F-A9CB7F8A1594.png

看这个web的源码，a 标签里的href的值是商品的淘宝链接，我们在app里点这个并不想直接去淘宝，那把这个href换了不就行了。

在哪换呢？

当然在这里：

-(void)webViewDidFinishLoad:(UIWebView *)webView

通过拼接Javascript，执行下面这个方法来实现。

- (nullable NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script;

那么，href换成啥呢？

显然换成商品的id啊，这样我们通过webview的代理方法就能获取到我们点的这个商品的id，传入自定义的方法，push出我们想要的界面。
从这个方法拦截web请求：

-(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType

OK，原理就这样。

——>小demo猛戳此处

效果：

Untitled.gif