UIWebView和JS交互iOS学习开发iOS Developer

WKWebView填坑之----与H5相互交互

2017-04-11  本文已影响831人  优米诺

APP的很大一部分功能都是原生和前端交互的,所以总结一下吧!
最低支持iOS 8.0,所以能用WebKit的地方就没有用UIWebView。
直接说交互吧,我个人站在iOS的角度来理解的交互有两种,一种正向交互,一种逆向交互。正向交互就是H5来调用原生,逆向交互就是原生调用H5,纯粹是个人见解,不喜勿喷。
1、创建

//要用WKWebView肯定需要引入库,有两种方式
  1> #import <WebKit/WebKit.h>
  2> @import WebKit;
// 一般常用的估计是第一种吧,第二种比较少见,引入系统库的时候可以采用这种方式

// 一般还是声明的全局属性
@property (nonatomic,strong) WKWebView *webView;

// 创建可以直接创建也可以采用懒加载
- (void)creatWebView{
    WKWebViewConfiguration *configuration = [[WKWebViewConfiguration alloc] init]
    WKUserContentController *userContentController =[[WKUserContentController alloc]init];
    configuration.userContentController = userContentController;
    // 根据需要去设置对应的属性
    WKWebView *webView = [[WKWebView alloc]initWithFrame:self.view.bounds configuration:configuration];
    webView.navigationDelegate = self;
    [self.view addSubview:webView]; 
    NSMutableURLRequest *request = [NSMutableURLRequest requestWithURL:[NSURL URLWithString:@"URL地址"]];
    [self.webView loadRequest:request];
}

2、代理

@protocol WKNavigationDelegate <NSObject>

@optional
//请求之前,决定是否要跳转:用户点击网页上的链接,需要打开新页面时,将先调用这个方法。
- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler;
//接收到相应数据后,决定是否跳转
- (void)webView:(WKWebView *)webView decidePolicyForNavigationResponse:(WKNavigationResponse *)navigationResponse decisionHandler:(void (^)(WKNavigationResponsePolicy))decisionHandler;
//页面开始加载时调用
- (void)webView:(WKWebView *)webView didStartProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
// 主机地址被重定向时调用
- (void)webView:(WKWebView *)webView didReceiveServerRedirectForProvisionalNavigation:(null_unspecified WKNavigation *)navigation;
// 页面加载失败时调用
- (void)webView:(WKWebView *)webView didFailProvisionalNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
// 当内容开始返回时调用
- (void)webView:(WKWebView *)webView didCommitNavigation:(null_unspecified WKNavigation *)navigation;
// 页面加载完毕时调用
- (void)webView:(WKWebView *)webView didFinishNavigation:(null_unspecified WKNavigation *)navigation;
//跳转失败时调用
- (void)webView:(WKWebView *)webView didFailNavigation:(null_unspecified WKNavigation *)navigation withError:(NSError *)error;
// 如果需要证书验证,与使用AFN进行HTTPS证书验证是一样的
- (void)webView:(WKWebView *)webView didReceiveAuthenticationChallenge:(NSURLAuthenticationChallenge *)challenge completionHandler:(void (^)(NSURLSessionAuthChallengeDisposition disposition, NSURLCredential *__nullable credential))completionHandler;
//9.0才能使用,web内容处理中断时会触发
- (void)webViewWebContentProcessDidTerminate:(WKWebView *)webView NS_AVAILABLE(10_11, 9_0);

@end

3、交互

// 首先说正交互吧
// webView创建后调用addScriptMessageHandler:方法,上接creatWebView方法
// 此处的“goBack”为iOS端与前端约定好的
[_userContentController addScriptMessageHandler:delegateController name:@"goBack"];
// 然后
- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message {
    if ([message.name isEqualToString:@"goBack"]) {
       // 如果监控到前端调用了 'goBack' 方法代码就会走进来,在这里做处理就行了
    }
}

4、坑
以上代码写完后并不是万事大吉了,你会发现在当前控制器消失时并不会走dealloc方法
原因就在于调用了 'addScriptMessageHandler' 方法

// 点进头文件后你会发现方法是成对出现的
- (void)addScriptMessageHandler:(id <WKScriptMessageHandler>)scriptMessageHandler name:(NSString *)name;

- (void)removeScriptMessageHandlerForName:(NSString *)name;
// 既然有 'add' 那就有 'remove' 
// 但是remove的时机就有点好玩了

// 在此我总结了几种
// 1> 'add' 在 viewDidLoad 调用,'remove' 在 viewWillDisappear调用
// 这种写法并不是不可以,前提是当前页面没有二级页面了,如果有二级页面就不能这么写

// 2> 'add' 在 viewDidLoad 调用,'remove' 在当前页面的 'pop' 方法调用
// 次方法解决了第一种方法的缺陷,但是还有一个问题,如果当前页面有右滑返回手势的话就不行

// 3> 使用代理
@interface ViewController ()<WKDelegate,WKNavigationDelegate,WKScriptMessageHandler>{
    WKWebView * webView;
    WKUserContentController* userContentController;
}
@end
@implementation ViewController
#pragma mark - lifeCircle
- (void)viewDidLoad {
    [super viewDidLoad];
    WKWebViewConfiguration * configuration = [[WKWebViewConfiguration alloc]init];
    userContentController =[[WKUserContentController alloc]init];
    configuration.userContentController = userContentController;
    webView = [[WKWebView alloc]initWithFrame:CGRectMake(0, 0, 100, 100) configuration:configuration];
    WKDelegateController * delegateController = [[WKDelegateController alloc]init];
    delegateController.delegate = self;

    [userContentController addScriptMessageHandler:delegateController  name:@"sayhello"];

    [self.view addSubview:webView];
    webView.navigationDelegate = self;
    [webView loadRequest:[NSURLRequest requestWithURL:[NSURL URLWithString:@"URL地址"]]];
}
- (void)dealloc{
    //这里需要注意,前面增加过的方法一定要remove掉。
    [userContentController removeScriptMessageHandlerForName:@"goBack"];
}
// 发现代理是最好的一种方式

WKDelegateController.h代码:

#import <UIKit/UIKit.h>
#import <WebKit/WebKit.h>

@protocol WKDelegate <NSObject>

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message;

@end

@interface WKDelegateController : UIViewController <WKScriptMessageHandler>
@property (weak , nonatomic) id<WKDelegate> delegate;
@end

WKDelegateController.m代码:

#import "WKDelegateController.h"

@interface WKDelegateController ()

@end

@implementation WKDelegateController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
}

- (void)userContentController:(WKUserContentController *)userContentController didReceiveScriptMessage:(WKScriptMessage *)message{
    if ([self.delegate respondsToSelector:@selector(userContentController:didReceiveScriptMessage:)]) {
        [self.delegate userContentController:userContentController didReceiveScriptMessage:message];
    }
}

@end

5、原生调用JS代码

// 在需要调用JS的地方执行如下代码
// 有参数
[self.webView evaluateJavaScript@"postInfo('参数1,参数2')"completionHandler:nil];
// 无参数
[self.webView evaluateJavaScript@"postInfo()"completionHandler:nil];
// 此处的 'postInfo()' 是前端的方法,需要前端告诉你
上一篇下一篇

猜你喜欢

热点阅读