html5实现图片拼接,iOS-HTML交互学习笔记（三）-拼接标题和图片放入webView中

在添加完body信息后，现在我们把标题和图片放入webView,

override func viewDidLoad() {

super.viewDidLoad()

// http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html

// 1.设置url

let url = NSURL(string: "http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html");

// 2.设置请求

let request = NSURLRequest(URL: url!);

// 3.开启异步请求操作

let dataTask = NSURLSession.sharedSession().dataTaskWithRequest(request) { (data, response, error) in

if (error == nil){

// 转为json数据，try？ 解决throws异常， as！强制转换

let jsonData = try? NSJSONSerialization.JSONObjectWithData(data!, options: NSJSONReadingOptions.AllowFragments) as! NSDictionary;

self.dealNewsDetail(jsonData!);

}

}

// 4.开启请求

dataTask.resume();

}

// 处理拿到的数据并显示

func dealNewsDetail(jsonData: NSDictionary) -> Void {

// 1.取出所有内容

let allData = jsonData["BSB33M1000234KO7"];

// 2.取出body中的内容

var bodyHtml = allData!["body"] as! String;

// 3.取出标题

let title = allData!["title"] as! String;

// 4.取出发布时间

let ptime = allData!["ptime"] as! String;

// 5.取出来源

let source = allData!["source"] as! String;

// 6.取出所有图片对象

let img = allData!["img"] as! [[String: AnyObject]];

// 7.遍历

for i in 0..

// 7.1取出单独的图片对象

let imgItem = img[i];

// 7.2取出站位标签

let ref = imgItem["ref"] as! String;

// 7.3取出图片标题

let imgTitle = imgItem["alt"] as! String;

// 7.4取出src

let src = imgItem["src"] as! String;

let imgHtml = "

\(imgTitle)

"

// 7.5替换body中的图片占位符

bodyHtml = bodyHtml.stringByReplacingOccurrencesOfString(ref, withString: imgHtml)

}

// 创建标题HTML标签

let titleHtml = "

\(title)

";

// 创建子标题html标签

let subTitleHtml = "

\(ptime) \(source)

"

// 拼接HTML

let html = "

\(titleHtml)\(subTitleHtml)\(bodyHtml)"

// 把对应的内容显示daowebView中

webview.loadHTMLString(html, baseURL: nil);

}

运行模拟器，观察效果，图片和标题都已经加入，但是图片适配有些问题，请看下一章：iOS-HTML交互学习笔记(四)-添加全局的CSS样式

运行效果.png