版权声明：本文为博主原创文章，未经博主允许不得转载。
教程合辑:
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
