文采不好,将就着看,见谅
思路最重要,故本文不提供源码下载
参考项目:
http://www.windowsphone.com/zh-cn/store/app/%E5%BF%83%E7%90%86fm/41089a68-2efa-47f7-bd40-a508a1c8c5df
由于Windows Phone在考虑性能的情况下限制每个TextBlock最多显示高度为2000像素的文本,若超过此值,将自动被截断,显示空白。
网上有很多此问题的解决方案,如:计算文字像素,向容器添加多个TextBlock。但此方法效率相对较低且可能导致文本分段不正确。
据我所知常使用的方案有两种:
1.分页,监听ScrollViewer,当滚动到最下方,自动加载新页内容(类似瀑布流)
2.使用WebBrowser
方案一在纯文本的情况下可使用(也存在分段不正确的问题)
本文介绍第二种方案,使用WebBrowser
在使用之前需在网络下载以下文件
1.Newtonsoft.Json.WindowsPhone.dll
用于json解析(本示例仅使用了一小部分此程序集的功能,为提高效率和减小XAP文件大小,您可考虑自行编写解析代码)
2.HtmlAgilityPack.dll
用于解析html,修改图片尺寸(为提高效率和减小XAP文件大小,您可自行编写正则表达式,查询img标签并替换相关属性)
3.jquery-1.9.1.js(其它版本也行)
用于脚本编写(本示例并未大量使用脚本,可不使用jquery,自行编写原生js亦可)
概述
windows phone自带IE9浏览器,全面支持HTML5
可完美实现图文混排
开发时,可采用两种方案
1.将读取的文章按文件单独存放到独立存储空间,查看时直接读取相应文件即可。
优点:效率高
缺点:不利于更新,如果日后更新文章模板,在不清除原有文件的情况下,曾经保存的文章板式得不到更新
2.建立数据库,将文章内容存放到数据库,查看时动态生成html页
注:使用此方法需考虑文本被截断的问题,Windows phone使用的是SQL CE,没有text类型字段,字符串类型列最大值为4000个字符,如超过将抛出异常。
可使用如下方法解决:将获取的文本内容以3000个字符为单位截取(为什么不是4000?考虑到SQL行最大字节为8049),以多条数据的形式保存(此方法并不是最好的,如有更好解决方法请指教)
优点:方便更新,不占用手机内存
缺点:性能较方案一低
由于WebBrowser控件默认允许拖动和放大缩小
阻止缩放可在Html的Head中添加:
<meta content="width=device-width,user-scalable=no" name="viewport">
阻止拖动,我们可做如下工作,具体可参考:http://www.scottlogic.com/blog/2010/03/04/linq-to-visual-tree.html
或百度搜索:LinqToVisualTree
操作思路
1.编写主要逻辑代码
2.相应的资源文件和模板放入项目,将生成操作设置为:Resources
之所以要做这一步,是因为WebBrowser控件读取的是独立存储空间的文件,在控件初始化时,需读取相应文件将其存放到独立存储空间
运行时思路
1.将拷贝的资源文件和模板文件转移到独立存储空间
2.获取文章详细内容
3.读取模板文件
4.替换模板内容
5.保存html文件
6.显示html
关于图片加载
加载内容,难免会存在图片,图片都存在于网络且尺寸不同,若每次显示都加载网络图片,势必会浪费用户流量,耗费时间
解决尺寸不同:
通过正则表达式或其它手段获取img标签,将宽设置为100%,删除高(自适应)
解决图片路径:
通过正则表达式或其它手段获取img标签,得到图片url,将图片缓存至独立存储空间,下次加载,首先判断独立存储空间是否存在对应文件,如存在则直接加载,若不存在则在加载网络图片的同时将图片缓存至独立存储空间。
/// <summary> /// 调整图片 /// </summary> /// <param name="html"></param> /// <param name="imageWidth"></param> /// <returns></returns> private string RevisionImg(string html, int imageWidth) { HtmlDocument document = new HtmlDocument(); document.LoadHtml(html); if (document == null) { return html; } var images = document.DocumentNode.SelectNodes("//img"); if (images == null || images.Count == 0) { return html; } foreach (HtmlNode image in images) { if (imageWidth != 0) { image.Attributes.Remove("width"); //image.Attributes.Add("width", string.Format("{0}px", imageWidth)); image.Attributes.Add("width", string.Format("{0}%", 100)); } if (image.Attributes["height"] != null) { image.Attributes["height"].Remove(); } if (image.Attributes["src"] != null) { try { string imageUrl = image.Attributes["src"].Value; //获取图片url,若不存在,则缓存至独立存储空间 StorageCachedImage cacheImage = new StorageCachedImage(new Uri(imageUrl, UriKind.Absolute)); if (cacheImage.IsSaveLocal) { imageUrl = "/" + cacheImage.ImageUri.Replace("\\", "/").TrimStart('/'); } image.Attributes["src"].Value = imageUrl; } catch { } } } return document.DocumentNode.OuterHtml; }