iOS wkwebview的封装

爱哭的僵小鱼 · 简书 · · 2018-09-22 14:52

6E8B197D-D047-41C2-9853-AF7510776406.png

最近比较忙也没时间去更新文章，也没有及时回复那些私聊的小伙伴，现在开始更新文章啦还请多多指教

1，今天我们说一下wkwebview 的封装，现在很多网页的加载基本上已经算是“弃用”啦 uiwebview 啦现在大部分app开发中需要加载的网页都在用 wkwebview 来实现。
实现的功能无外乎就3个
①导航栏上的返回按钮（实现的功能就是返回上一个界面）
②导航栏上的关闭按钮（实现的功能就是关闭当前的所有页面直接返回首页）或许你会问为什么要实现这个功能呢，因为网页的加载其实还伴随着 js 直接的交互以及网页他们自带的跳转，所以为了用户体验所以得实现一个返回上一个界面功能，实现一个返回首页的功能
③ 进度条（其实这个就是为了用户体验，当你刚进这个界面的时候显示一片空白，用户会以为 app出问题了，所以唯一功能就是提示用户正在加载中请不要着急，还有的app 会用 hub 来代替进度条所以这个看产品的功能需求啦，产品想什么样子的你就得改成什么样子啦 😔）

现在说完了功能那下面我们说一下这个怎么实现的

① 这个导航栏跳转的这个就不需要我来说吧大部分做开发应该都会吧这个导航栏我自定义的（所以如果真不知道怎么用的可以私聊我我发源码给😔）

//首次设置导航栏相关标识
#define K_NavigationSttingState @"K_NavigationSttingState"


/** 返回按钮图片 */
static NSString *const backBarButtonItemImageName = @"ic_back";

/** 导航下方细线颜色 */
static NSString *const navigationLineColors = @"0xefefef";

/** 导航标题字体颜色 */
static NSString *const navigationTitleColors = @"0x556d80";


@interface NSObject (NDColorChangeImage)

/**
 * 颜色转UIImage
 * \param color 生成图片所需颜色
 */
+ (UIImage*)createCustomImageWithColor:(UIColor*)color;

@end



@interface UIViewController (NDNavigationBackBarButtonItem)

/**
 * 自定义导航返回按钮
 * \param isOpenGestures 是否开启pop手势
 */
- (void)customNavigationBackBarButtonItemWithOpenGestures:(BOOL)isOpenGestures;

/** 返回按钮事件（子类可重写） */
- (void)backBarButtonItemAction:(UIButton *)sender;


/** 通过颜色设置导航栏背景色 */
- (void)setCustomNaviBackgroundColor:(UIColor *)color;
/** 通过图片设置导航栏背景色 */
- (void)setCustomNaviBackgroundImageFormImage:(UIImage *)image;
/** 设置导航栏标题颜色 */
- (void)setCustomNaviTitleColor:(UIColor *)color;

2，进度条
--- 1 首先初始化进度条

    //进度条
    _progressView = [[UIProgressView alloc]initWithFrame:CGRectMake(0,0, SCREEN_WIDTH,2)];
    _progressView.progressTintColor = UIColorFromRGB(0xffa11a);
    _progressView.trackTintColor = UIColorFromRGB(0xe1e1e1);
    [self.view addSubview:_progressView];

---2 给wkwebview 监听监听他的加载进度（kvo）你可以用nsnification 观察者模式

    //监听加载进度
    [_customWebView addObserver:self forKeyPath:@"estimatedProgress" options:NSKeyValueObservingOptionNew| NSKeyValueObservingOptionOld context:nil];

---3 执行webview的进度监听

- (void)observeValueForKeyPath:(nullable NSString *)keyPath ofObject:(nullable id)object change:(nullable NSDictionary<NSKeyValueChangeKey, id> *)change context:(nullable void *)context {

}

进门的wkwebview 也就是这几个现在大部分都会有js交互的我的自定义.m 是这样写的


//移除JS调用OC 添加处理脚本
- (void)removeScriptMessageHandler {
    for (NSString * obj in self.addScriptMessageHandlerArry) {
        if (obj.length >0) {
            [self.customWebView.configuration.userContentController removeScriptMessageHandlerForName:obj];
        }
    }
}
//添加JS调用OC 添加处理脚本
- (void)addScriptMessageHandler {
    [self removeScriptMessageHandler];
    
    for (NSString * obj in self.addScriptMessageHandlerArry) {
        if (obj.length >0) {
            [self.customWebView.configuration.userContentController addScriptMessageHandler:self name:obj];
        }
    }
}

这个只是添加js调用 oc 的脚步。所以具体实现中，对于刚接触wkwebview的开发者来说还略微有点难，这么怎么实现的我就不在这边写了，如果有什么不懂的额可以私聊我，嗯具体的代码我会上传到 github上以供大家参考，
（此文章中的只是为了讲解 wkwebview怎么用，具体怎么实现，粘贴出来的代码只是部分，不是完全，还请谅解）具体的可是私聊或者去github 下载

1.ios kvo和kvc与NSnotificationd 传送门
2,github传送门

                   点赞对于我的最大的支持

原文地址：访问原文地址
快照地址：访问文章快照

分享到微博