原創教程: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
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容