高仿新闻应用

首页(新闻数据的处理)

后台返回的数据只有一个Html的Body内容。至于文本的显示样式需要在本地拼处理

高仿新闻应用_第1张图片

这时候就需要根据样式自己在本地拼接一些字符串 使图片和文字正确的显示

NSMutableString *html = [NSMutableString string];

[html appendString:@""];

[html appendString:@""];

NSURL *url = [[NSBundle mainBundle] URLForResource:@"Detail.css" withExtension:nil];

/** link这里是h5里面的引入css样式的标签,引入本地的Details文件*/

[html appendString:@"",url];

/**拼接头部完毕*/

[html appendString:@""];

[html appendString:@""];

在Body中间添加需要的HTML文本

/**拼接body完毕*/

[html appendString:@""];

[html appendString:@""];

给图片添加点击事件

给图片添加点击事件 大体思路上有两种 第一种就是拦截连接的方法,第二种就是图片点击后,调用原生的方法。这里建议使用第二种,简单一些。

1.给图片的添加点击事件的思路大体上是:利用JS的方法给图片添加上点击事件,当点击图片的时候,就修改window.location.href这个属性(将图片链接设置为该属性)。这个属性使用控制着当前页面的跳转使用的。修改后,在webView的代理方法

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType  就可以拦截到要跳转的连接,也就拿到你需要的图片的地址.

给图片添加点击事件

NSString *onload = @"this.onclick = function() {\       

window.location.href = 'sx:src=' +this.src;\        };";       

这里这个imgModel.src是图片的地址。

[imgHtml appendFormat:@"",onload,imgModel.src];   

然后在webView的代理方法里面这么做 就可以拦截图片的连接(有点麻烦)

- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {

NSString *url = request.URL.absoluteString;

NSRange range = [url rangeOfString:@"sx:src="];

if (range.location != NSNotFound) {

NSInteger begin = range.location + range.length;

NSString *src = [url substringFromIndex:begin];

[self savePictureToAlbum:src];

return NO;

}

return YES;

}

2.第二种方法简单些 可以这么做,直接给图片添加上点击事件,将图片的连接直接传给原生的方法

NSString *onload = @"this.onclick = function() {\     

  lbImageClick(this.src);\     

  };";       

[imgHtml appendFormat:@"",onload,imgModel.src];

这里面的lbImageClick 方法需要原生的实现就可以了

在webView的这个代理方法里面实现

- (void)webViewDidFinishLoad:(UIWebView *)webView {

JSContext *context = [webView  valueForKeyPath:@"documentView.webView.mainFrame.javaScriptContext"];

context[@"lbImageClick"] = ^(NSString *src) {

[self savePictureToAlbum:src];

};

}

这种方法相比第一种感觉简单些。。。。。(这个需要#import

给写好的网页图片添加点击事件 (在webViewDidFinishLoad)

NSString *jsGetImages = @"function getImages(){\

var objs = document.getElementsByTagName(\"img\"); \

for(var i = 0 ; i

objs[i].onclick = function(){\

//这里就可以给每张图片添加上点击方法了。。。。

}\

}\

return objs.length;\

}";

[webView stringByEvaluatingJavaScriptFromString:jsGetImages];

/**调用该JS方法*/

NSString *length = [webView stringByEvaluatingJavaScriptFromString:@"getImages()"];

DLog(@"%@",length); 返回图片的个数。

上面gif的效果demo里面都做了详细的介绍,感觉没什么说的了(文章格式写的挺丑)。

demo地址 :https://github.com/tianliangyihou/GFDayDayNews

如果直接点击网址打不开的话,可以直接复制网址,在浏览器上访问,或者在github上搜索GFDayDayNews

你可能感兴趣的:(高仿新闻应用)