1、首先了解到后臺返回的數(shù)據(jù)格式（此處為網(wǎng)易新聞返回的數(shù)據(jù)格式）
/*
{
"CN8JAMBI0001875N":{
"body":"<!--IMG#0--><p> 本文的........</p>",//文章的核心內(nèi)容
"users":Array[0],
"img":[
{
"ref":"<!--IMG#0-->", // 圖片的占位符
"pixel":"750*300", //圖片的寬高
"alt":"", //圖片的文字說明
"src":"http://cms-bucket.nosdn.127.net/0710e75f54d146fc87fb801d4cdfc39d20170619000031.jpeg"
}, //圖片的路徑
],
"title":"中央查處這件事，讓一些地方“形同十級地震”",//文章的標題
"ptime":"2016-09-20 21:56:57"http://文章的發(fā)布時間
}
}
*/
2亿虽、獲取數(shù)據(jù)并解析數(shù)據(jù)
self.dataDictionary = [NSDictionary dictionaryWithDictionary:[dict objectForKey:@"CN8JAMBI0001875N"]];//得到詳情數(shù)據(jù)字典
3、使用UIWebView來接收頁面返回的數(shù)據(jù)
@property (nonatomic, strong)UIWebView *webView;
- (UIWebView *)webView
{
if (!_webView) {
_webView = [[UIWebView alloc]initWithFrame:CGRectMake(0, 64, ScreenWidth, 100)];
_webView.delegate = self;
}
return _webView;
}
4苞也、核心內(nèi)容：加載網(wǎng)頁的內(nèi)容洛勉，里面有設(shè)計拼接網(wǎng)頁元素，以及h5的相關(guān)知識
- (NSString *)getBodyString
{
NSMutableString *body = [NSMutableString string];
if (self.dataDictionary.count != 0) {
[body appendFormat:@"<div class=\"title\">%@</div>",[self.dataDictionary objectForKey:@"title"]];
[body appendFormat:@"<div class=\"time\">%@</div>",[self.dataDictionary objectForKey:@"ptime"]];
[body appendString:[self.dataDictionary objectForKey:@"body"]];
NSMutableArray *imageArr = [self.dataDictionary objectForKey:@"img"];
for (int i = 0; i < imageArr.count; i ++) {
NSDictionary *dict = [imageArr objectAtIndex:i];
NSMutableString *imgHtml = [NSMutableString string];
// 設(shè)置img的div
[imgHtml appendString:@"<div class=\"img-parent\">"];
NSArray *pixel = [[dict objectForKey:@"pixel"] componentsSeparatedByString:@"*"];
CGFloat width = [[pixel firstObject]floatValue];
CGFloat height = [[pixel lastObject]floatValue];
// 判斷是否超過最大寬度
CGFloat maxWidth = [UIScreen mainScreen].bounds.size.width * 0.96;
if (width > maxWidth) {
height = maxWidth / width * height;
width = maxWidth;
}
NSString *onload = @"this.onclick = function() {"
" window.location.href = 'sx://github.com/dsxNiubility?src=' +this.src+'&top=' + this.getBoundingClientRect().top + '&whscale=' + this.clientWidth/this.clientHeight ;"
"};";
[imgHtml appendFormat:@"<img onload=\"%@\" width=\"%f\" height=\"%f\" src=\"%@\">",onload,width,height,[dict objectForKey:@"src"]];
[imgHtml appendString:@"</div>"];
[body replaceOccurrencesOfString:[dict objectForKey:@"ref"] withString:imgHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
}
}
return body;
}
- (NSString *)getHtmlString
{
NSMutableString *html = [NSMutableString string];
[html appendString:@"<html>"];
[html appendString:@"<head>"];
[html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"InfoDetails.css" withExtension:nil]];//創(chuàng)建CSS文件
[html appendString:@"</head>"];
[html appendString:@"<body style=\"background:#f6f6f6\">"];
[html appendString:[self getBodyString]];
[html appendString:@"</body>"];
[html appendString:@"</html>"];
return html;
}
5如迟、UIWebView代理方法實現(xiàn)
#pragma mark -- UIWebViewDelegate
- (void)webViewDidFinishLoad:(UIWebView *)webView
{
self.webView.height = self.webView.scrollView.contentSize.height;
[self.dataTableView reloadData]; //同時刷新頁面
}
6坯认、將webView 直接加載到tableViewheader上面,同時設(shè)置header高度為webview高度
- (CGFloat)tableView:(UITableView *)tableView heightForHeaderInSection:(NSInteger)section
{
return self.webView.height;
}
- (UIView *)tableView:(UITableView *)tableView viewForHeaderInSection:(NSInteger)section
{
return self.webView;
}
7、如果需要加載評論信息的話 直接可以自定義cell完成實現(xiàn)氓涣，
以上就是使用webView實現(xiàn)新聞詳情頁面實現(xiàn)（圖片的點擊和視頻的播放功能牛哺，后面會實現(xiàn)）
