文采不好,将就着看,见谅

思路最重要,故本文不提供源码下载

参考项目:

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

Windows Phone 显示长文本

之所以要做这一步,是因为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;
        }
代码片段

相关文章:

  • 2021-06-11
  • 2021-08-12
  • 2021-07-17
  • 2021-06-02
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-06-05
  • 2021-07-24
  • 2021-10-04
  • 2021-11-21
  • 2021-10-06
  • 2021-09-11
相关资源
相似解决方案