需求
我們今天探討的主題是JS與OC交互的WKWebView篇，那么主要實現的需求就是我們截取網頁上的按鈕點擊然后調用本地的OC代碼
準備
- 裝有Xcode的MAC電腦一臺
- 一個電商網頁的地址，本處提供如下研究地址
https://m.benlai.com/huanan/zt/1231cherry - Google瀏覽器
打開Google開發者調試
首先將上述網頁地址在谷歌上打開，并且打開開發者工具：
Snip20180115_2.png
然后選中Element選項:
Snip20180115_4.png
選中左邊的箭頭：
Snip20180115_7.png
這樣在左邊的網頁中，鼠標在什么位置然后就會有相應的選中區域顯示出來，如圖：
Snip20180115_9.png
接下來就是正文了==>
JS和OC交互
-
先找到一個加入購物車的按鈕，如下：
Snip20180115_11.png
Snip20180115_13.png
這里面調用了一個函數：addProductToCartWithMove(319901,0,1,this)
那這個函數里面的參數不難發現是有一個產品的ID就是第一個319901，那現在我們需要把這個參數給傳出來，讓OC接收，然后在當前窗口Alert這個產品ID就可以了(就相當于加入購物車了，并且上傳到服務端)，然后后臺更新一下，到時候前端訪問的時候也能知道這個產品已經加入購物車了...
那怎么做呢，
- 第一步：先在手機端創建一個WKWebView，代碼如下：
#import "ViewController.h"
#import <WebKit/WebKit.h>
@interface ViewController () <WKScriptMessageHandler, WKNavigationDelegate, WKUIDelegate>
@property (nonatomic, strong) WKWebView *wkWebView;
@end
@implementation ViewController
#pragma mark - life cycle
- (void)viewDidLoad {
[super viewDidLoad];
//配置wkWebView
[self configWKWebView];
}
//配置wkWebView
- (void)configWKWebView{
WKWebViewConfiguration *config = [[WKWebViewConfiguration alloc] init];
self.wkWebView = [[WKWebView alloc] initWithFrame:CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height) configuration:config];
[self.view addSubview:self.wkWebView];
self.wkWebView.UIDelegate = self;
self.wkWebView.navigationDelegate = self;
NSURL *url = [NSURL URLWithString:@"https://m.benlai.com/huanan/zt/1231cherry"];
NSURLRequest *request = [NSURLRequest requestWithURL:url];
[self.wkWebView loadRequest:request];
WKUserContentController *userCC = config.userContentController;
//意思是網頁中需要傳遞的參數是通過這個JS中的showMessage方法來傳遞的
[userCC addScriptMessageHandler:self name:@"showMessage"];
}
@end
- 第二 步：準備一段JS代碼：
//添加購物車的代碼實現
function addProductToCart(a,b,c){
window.webkit.messageHandlers.showMessage.postMessage([a,b,c])
}
//添加購物車并伴隨動畫的代碼實現
function addProductToCartWithMove(a,b,c){
window.webkit.messageHandlers.showMessage.postMessage([a,b,c])
}
直接創建一個data.txt文件封存這段JS代碼：
Snip20180115_15.png
注意：注意以上代碼實現的格式！！！
- 第三步：代理實現
代理一：在完全加載完網頁的時候注入JS代碼：
#pragma mark - WKNavigationDelegate
///加載完成網頁的時候才開始注入JS代碼,要不然還沒加載完時就可以點擊了,就不能調用我們的代碼了!
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation{
NSString *path = [[NSBundle mainBundle]pathForResource:@"data.txt" ofType:nil];
NSString *str = [NSString stringWithContentsOfFile:path encoding:NSUTF8StringEncoding error:nil];
[self.wkWebView evaluateJavaScript:str completionHandler:nil];
}
代理二：接收JS端發過來的消息，并處理相應的業務邏輯，此處不加入購物車，直接彈出產品ID即可
#pragma mark - WKScriptMessageHandler
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
NSLog(@"%@",NSStringFromSelector(_cmd));
NSLog(@"%@",message);
NSLog(@"%@",message.body);
NSLog(@"%@",message.name);
//這個是注入JS代碼后的處理效果,盡管html已經有實現了,但是沒用,還是執行JS中的實現
if ([message.name isEqualToString:@"showMessage"]) {
NSArray *array = message.body;
NSLog(@"%@",array.firstObject);
NSString *str = [NSString stringWithFormat:@"產品ID是: %@",array.firstObject];
[self showMsg:str];
}
}
此處附上private method showMsg：的實現：
#pragma mark - private
- (void)showMsg:(NSString *)msg {
[[[UIAlertView alloc] initWithTitle:nil message:msg delegate:nil cancelButtonTitle:nil otherButtonTitles:@"OK", nil] show];
}
以上基本上就能實現需求了，接下來就剩驗證階段了，效果圖如下：
Snip20180115_17.png
附送DEMO
推薦讀：
iOS開發之UIWebView和WKWebView使用上的差別
以上！！！
嘬奶.gif
