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..<img.count {
        // 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 = "<div><img src=\"\(src)\"><div>\(imgTitle)</div></div>"
        
        // 7.5替换body中的图片占位符
        bodyHtml = bodyHtml.stringByReplacingOccurrencesOfString(ref, withString: imgHtml)
    }
    
    // 创建标题HTML标签
    let titleHtml = "<div>\(title)</div>";
    
    // 创建子标题html标签
    let subTitleHtml = "<div><span>\(ptime)</span><span>\(source)</span></div>"
    
    
    // 拼接HTML
    let html = "<html><head></head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)</body></html>"
    
    // 把对应的内容显示daowebView中
    webview.loadHTMLString(html, baseURL: nil);
    
}

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

运行效果.png

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

推荐阅读更多精彩内容