iOS wkwebview的封裝

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傳送門

                   點贊對於我的最大的支持
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章