WebView和网页的交互(网易新闻详情篇)

新闻内容的图文混排的效果,网上有人开源一个仿网易新闻的代码,本文就是简单记录学习其详细页面显示的效果实现;
一般网易详情页面后台返回的数据内容与通常的json格式,其原理:通过网络请求获得相关的信息,再通过手机端进行拼HTML,然后在WebView进行展示,此处还对文章中的图片增加点击效果,可以保存到相册中;文章的样式已经存在项目中,直接去调用;

WebView和网页的交互(网易新闻详情篇)_第1张图片
网易详情数据

1:首先了解两个相关的实体对象,一个是新闻的主体内容,另外一个就是图片的相关信息实体,所以我们需要NSURL进行读取网站

 NSURL *url = [NSURL URLWithString:@"http://c.m.163.com/nc/article/A7AQOT560001124J/full.html"];

2.进行数据请求(创建一个- (void)showNews:(NSDictionary *)news)将所请求接受的数据进行拼接

// 2.requets
    NSURLRequest *request = [NSURLRequest requestWithURL:url];
    
    // 3.发送请求
    [NSURLConnection sendAsynchronousRequest:request queue:[NSOperationQueue mainQueue] completionHandler:^(NSURLResponse *response, NSData *data, NSError *connectionError) {
        NSDictionary *dict = [NSJSONSerialization JSONObjectWithData:data options:NSJSONReadingMutableLeaves error:nil];
        NSDictionary *news = dict[@"A7AQOT560001124J"];
        [self showNews:news];
    }];

- (void)showNews:(NSDictionary *)news
{
    // 1.取出网页内容
    NSString *body = news[@"body"];
    
    // 2.取出图片
    NSDictionary *img = [news[@"img"] lastObject];
    NSString *imgHTML = [NSString stringWithFormat:@"", img[@"src"]];
    
    // 2.创建一个webView,显示网页
    UIWebView *webView = [[UIWebView alloc] init];
    webView.frame = self.view.bounds;
    [self.view addSubview:webView];
    
    // 3.拼接网页内容
    NSString *html = [body stringByReplacingOccurrencesOfString:img[@"ref"] withString:imgHTML];
    
    // 4.取出新闻标题
    NSString *title = news[@"title"];
    // 5.取出新闻的时间
    NSString *time = news[@"ptime"];
    
    // 头部内容
    NSString *header = [NSString stringWithFormat:@"
%@
%@
", title, time]; html = [NSString stringWithFormat:@"%@%@", header, html]; // 链接mainBundle中的CSS文件 NSURL *cssURL = [[NSBundle mainBundle] URLForResource:@"news" withExtension:@"css"]; html = [NSString stringWithFormat:@"%@", html, cssURL]; // 5.加载网页内容 [webView loadHTMLString:html baseURL:nil]; }

你可能感兴趣的:(WebView和网页的交互(网易新闻详情篇))