iOS_CNBlog項目開發 (基於博客園api開發) 上篇

按照慣例, 先上效果圖

 

前言

作這個項目是由於恰好在逛博客園的時候看到一篇文章 博客園第三方客戶端-i博客園正式發佈App Store, 這裏就幫忙貼下連接吧. 

整個項目作下來大概作了半個月, 今天算是作出1.0版本, 已經貼上github(https://github.com/samAroundGitHub/CNBlog), 歡迎各路人士指導交流啦.

項目介紹 

1. 工具和資料

　　博客園官方open web api網址：(再次感謝桑果, 由於我不會找api...(╮(╯▽╰)╭))

1. http://wcf.open.cnblogs.com/news/help （新聞）
2. http://wcf.open.cnblogs.com/blog/help （博客）

　　第三方框架 (此次主要想說不要用太多第三方, 因此爲了開發效率只用了幾個)

1. SDWebImage
2. MJRefresh
3. SVProgressHUD

 

2. UI設計

這裏就貼下個人一些UI傑做好了(^^)

項目中用到的UI, 像appIcon, LaunchImage, 還有一些佔位圖標我是本身作的(Sketch), 而後有一部分是http://www.easyicon.net上的, 還有一部分是之前項目的圖標, 我也有從ituns下載app, 打開它的包想拿它的圖片, 居然沒找到想要的那幾個, 應該是髮網絡請求獲取的吧.

不知道怎麼獲取app圖片資源的, 這裏推薦一個網址:iOS，如何模仿一個App

開發難點

1. 博客園api數據解析

博客園返回的數據是xml, 因此我選擇用蘋果官方自帶的NSXMLParser進行解析, 爲此我特意寫了一個工具類(SMXMLParserTool), 這裏介紹一下用法, 有須要的能夠拖到你的項目本身就使用.

.h文件

+ (instancetype)sm_toolWithURLString:(NSString *)urlString nodeName:(NSString *)nodeName completeHandler:(void (^)(NSArray *contentArray, NSError *error))completerHandler;
- (instancetype)sm_initWithURLString:(NSString *)urlString nodeName:(NSString *)nodeName completeHandler:(void (^)(NSArray *contentArray, NSError *error))completerHandler;

@property (nonatomic, readonly, strong) NSArray *contentArray;
@property (nonatomic, strong) NSString *nodeName;

使用的時候只須要調用類方法, [SMXMLParserTool sm_toolWithURLString:...], 須要傳入一個xml節點的名稱, 好比博客園的xml節點結構以下的話,

<doc>
	<feed>
		<title>博客園_48小時閱讀排行</title>
		<id>d2e2f719-12cd-414e-ac2c-9d376c950c8a;id=...</id>
		// 刷新時間
		<updated></updated>

		<entry> </entry>
		<entry> </entry>
		<entry> </entry>
	</feed>
</doc>

// 博客信息
<entry> 
	// 文章id
	<id></id>
	// 博客題目
	<title></title>
	// 文章概述
	<summary></summary>
	// 發佈時間
	<published></published>
	// 獲取時間
	<updated></updated>
	// 發佈人信息
	<author>
		// 姓名
		<name></name>
		// 博客首頁
		<uri></uri>

		<avatar>
			// 頭像
			<http/>
		 </avatar>
	</author>

	<link></link>
	// 推薦人數
	<diggs></diggs>
	// 閱讀過的人數
	<views></views>
	// 評論數
	<comments></comments>
 </entry>

你只要傳入@"entry", 而後就會獲得節點entry下以各子節點爲key值爲value的dictionary而後存入到contentArray, 在回調函數completeHandler中能夠直接使用得到的數據contentArray. 若是解析過程發生錯誤, error信息會被打印到控制檯.  

 

2. 第二個難點仍是博客園api的數據解析

由於博客園返回博客的文章格式是html格式的. 因此須要解析html語句. 這裏我採用的方法是[UIWebView LoadHtmlString:..];

而後會發現解析完的頁面圖片會超出顯示範圍, 這是須要用到 [webView stringByEvaluatingJavaScriptFromString:..] 用javaScript改變圖片大小

// 設置圖片的寬高適應屏幕
    [webView stringByEvaluatingJavaScriptFromString:[NSString stringWithFormat:
                                                     @"var script = document.createElement('script');"
                                                     "script.type = 'text/javascript';"
                                                     "script.text = \"function ResizeImages() { "
                                                     "var myImg,oldWidth,oldHeight;"
                                                     "var maxWidth=%f;"// 圖片寬度
                                                     "for(i=0;i <document.images.length;i++){"
                                                     "myImg = document.images[i];"
                                                     "oldWidth = myImg.width;oldHeight = myImg.height;"
                                                     "var scale = oldWidth/oldHeight;"
                                                     "if(myImg.width > maxWidth){"
                                                     "myImg.width = maxWidth;myImg.height = maxWidth/scale;"
                                                     "}"
                                                     "}"
                                                     "}\";"
                                                     "document.getElementsByTagName('head')[0].appendChild(script);", kScreenW-20]];
    [webView stringByEvaluatingJavaScriptFromString:@"ResizeImages();"];
    

 這樣就能夠把超過的圖片顯示到你要的範圍內了.

 

3. 第三個難點仍是博客園api數據解析

此次是爲何這樣說呢? 由於若是你要點擊webView下的圖片有響應, 還得再次用到剛剛的方法 [UIWebView LoadHtmlString:..];

默認的狀況下點擊是不會觸發事件的, 因此要用javaScript讓圖片有onclick()方法, 而後改變document.loaction的值, 實現頁面跳轉, 在UIWebView代理方法 - (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType; 下捕捉事件進行處理

// 添加圖片的onclick方法
    NSString *setImageOnclickString = [NSString stringWithFormat:
                                       @"function setImageOnclick() {\
                                       var imgs = document.getElementsByTagName('img');\
                                       for(var i=0; i<imgs.length; i++) {\
                                       imgs[i].onclick = function(){\
                                       document.location = this.src;}}}"];
    [webView stringByEvaluatingJavaScriptFromString:setImageOnclickString];
    [webView stringByEvaluatingJavaScriptFromString:@"setImageOnclick()"];

 我處理的方法是用蘋果新的內嵌SFSafariViewController實現跳轉, 這樣的好處是直接能夠在app內享有safari自帶的功能, 好比保存圖片, 進入閱讀模式等等, 並且仍是在app內沒有離開你的app.  使用SFSafariViewController前須要 #import <SafariServices/SafariServices.h>

 4. 第四個難點依然是博客園api數據解析

醉了, 是否是. 哈哈. 不過此次我說的難點是在邏輯上不是在技術上的. 獲取數據的數目上下拉的獲取多少數據, 總共有多少數據, 不一次性獲取數據的狀況下每次獲取多少數據能夠避免流量浪費, 反正是一系列邏輯上要解決的問題, 因爲狀況不少, 我就不貼代碼了, 有遇到問題再交流交流.

5. tarBarHideWhenPush

終於第五個難點不是api數據解析了, 可是其實tarBarHideWhenPush也不算難點, 只是會常常走彎路, 當UITabBarViewController嵌套UINavgationController附加有UIViewController, 反正關係一複雜起來, 就會發現不少人問hidesBottomBarWhenPushed = YES爲何無論用, 我也百度過試過不少方法, 好比 

    self.hidesBottomBarWhenPushed = YES;
    [self.navigationController pushViewController:.. animated:YES];
    self.hidesBottomBarWhenPushed = NO;

再好比, 在viewDidappear中才加入 self.hidesBottomBarWhenPushed = YES. 反正就是不少說法, 可是都不怎麼有效..

我獨門的解決方法是在你要隱藏tarBar的VC中調用

// push後隱藏tabBar
- (BOOL)hidesBottomBarWhenPushed {
    return YES;
}