您的位置：首页 > Web前端 > JavaScript

json转html样式

2016-04-10 09:47 621 查看

网易新闻有一个栏目叫"胖编怪谈",讲的是一系列的灵异事件,闲来无事来解析一下里面的数据,看一下大公司是怎么做的数据传输.

我们以最近的一篇为例:

http://c.3g.163.com/nc/article/BK5G2S7B00964JJM/full.html

打开我们可以发现主体的body大致为html语句的格式,不过里面插入了大量的 ,看下面的数据是吧音频和图片都放进了一个数组,所以我们要做的事情就是拼接Html语句,把解析出来的img数组里面的图片信息代替里面的内容

主体代码:

-(void)showBasicWeb{
NSMutableString * html = [NSMutableString string];
[html appendString:@"<!DOCTYPE HTML>"];
[html appendString:@"<html>"];
[html appendString:@"<head>"];
[html appendFormat:@"<link rel=\"stylesheet\" href=\"%@\">",[[NSBundle mainBundle] URLForResource:@"SXDetails.css" withExtension:nil]];
[html appendString:@"</head>"];
[html appendString:@"<body>"];
[html appendString:[self bodyStr]];
[html appendString:@"</body>"];
[html appendString:@"</html>"];
NSLog(@"%@",html);
[self.web loadHTMLString:html baseURL:nil];
}
-(NSString *)bodyStr{
NSMutableString * body = [NSMutableString string];
[body appendFormat:@"<div class=\"title\">%@</div>",self.detailModel.title];
[body appendFormat:@"<div class=\"time\">%@</div>",self.detailModel.ptime];
if (self.detailModel.body != nil) {
[body appendString:self.detailModel.body];
}
//    图片html字符串替换 BK4HTLPL00964LQ9
for (NSInteger i = 0; i < self.detailModel.img.count; i++) {
NSMutableString * imgHtml = [NSMutableString string];
[imgHtml appendString:@"<div class = \"img-parent\">"];
ImageModel * imageModel = [ImageModel modelWithImgDictionary:self.detailModel.img[i]];
NSArray * pixel = [imageModel.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:src=' +this.src;"
"};";

[imgHtml appendFormat:@"<img onload=\"%@\" width=\"%f\" height=\"%f\" src=\"%@\">",onload,width,height,imageModel.src];
// 结束标记
[imgHtml appendString:@"</div>"];
// 替换标记
[body replaceOccurrencesOfString:imageModel.ref withString:imgHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];

}
//    视频图片html字符串替换
for (NSInteger i = 0; i < self.detailModel.video.count; i++) {
NSMutableString * videoHtml = [NSMutableString string];
[videoHtml appendString:@"<div class = \"video-parent\">"];
VideoModel * videoModel = [VideoModel modelWithVideoDictionary:self.detailModel.video[i]];
//        NSString * videoPic = videoModel.cover;
//        加<p>在html中不警告
[videoHtml appendFormat:@"<img src = \"%@\"></audio>",videoModel.url_m3u8];
[body replaceOccurrencesOfString:videoModel.ref withString:videoHtml options:NSCaseInsensitiveSearch range:NSMakeRange(0, body.length)];
}
return body;
}

用循环体遍历图片数组,解析出来图片的大小和地址,再给出点击的方法,拼接图片长宽和地址,替换到原来的位置就可以了.

[imgHtml appendFormat:@"<img onload=\"%@\" width=\"%f\" height=\"%f\" src=\"%@\">",onload,width,height,imageModel.src];

用OC写图文混排比较难,我们可以用html代替,另外想到无图模式的实现,就是不替换img数组的内容,vido的内容可以加<audio>标签.

附:胖编怪谈最新100条地址:

http://c.m.163.com/nc/special/S1426235566308.html

里面 docid 为下一页的详情id,如下

http://c.3g.163.com/nc/article/BK5G2S7B00964JJM/full.html

参考

https://github.com/346285234/Imitate_NewsOfNetEasy

里面的

SXDetailController.m

的实现

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航