json转html样式

最新推荐文章于 2024-08-09 07:33:29 发布

YoungFroever

最新推荐文章于 2024-08-09 07:33:29 发布

阅读量681

点赞数

分类专栏： iOS学习总结

本文链接：https://blog.csdn.net/chengan1993/article/details/51111207

版权

iOS学习总结专栏收录该内容

25 篇文章 0 订阅

订阅专栏

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

我们以最近的一篇为例:

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 οnlοad=\"%@\" 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 οnlοad=\"%@\" 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

的实现

YoungFroever

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录