OpenWeen微博文本框实现思路

对于一个微博客户端来说,很关键的一个部分就是正确的显示微博内容。从微博API返回回来的微博内容非常的原始,仅仅是一堆文本而已,需要对这些文本进行处理才能正确的显示出来。

文章没有什么代码,只是个思路。

很明显,一个微博文本里面可以包含很多东西,比如表情,超链接,单单的TextBlock肯定是不能满足的,所以我们需要使用RichTextBlock来完成对微博内容的显示。

关于性能:一开始我是有些担心使用RichTextBlock会大大提高内存占用降低性能,但是最后证明这个担心是多余的。

基本思路就是动态生成RichTextBlock的Paragraph,通过正则替换掉文本内容中的表情、超链接、@的用户名以及话题。

表情需要使用图片,对于图片可以使用InlineUIContainer内嵌Image的形式进行显示。对于表情的正则表达式很简单也很暴力,基本形式就是“[表情]|[表情]|….”,可以select表情列表之后通过string.Join来生成。在OpenWeen里面保存了一个emotion.json文件用于保存表情信息,在启动时反序列化并生成正则放在内存中。对于现在的内存来说这个正则并不占用太多空间,而且不太可能每次处理表情时就读取一个文件,相对内存来说这是很消耗时间的。本来emotion.json和表情图片是不保存在程序中的而是直接访问API获取,但是由于这样会使启动时间大幅增加,后续版本中就内置了这些文件。

对于用户名和话题,基本上都是正则替换成InlineUIContainer内嵌TextBlock,至于为什么要这样处理而不是简单的Span,后面会说明原因

对于超链接也是一样,InlineUIContainer内嵌TextBlock而不是直接使用Hyperlink,OpenWeen在TextBlock的Tag属性里面存储超链接,TextBlock内容只使用“网页链接”来对链接进行简化显示处理。在微博支持长微博之后,如果是长微博API会返回不完全的微博内容,也就是最后加个“全文: http://m.weibo.cn/”,在这里要先行替掉以免后续处理这个全文的超链接。

至于为什么要用InlineUIContainer内嵌TextBlock,因为我们使用Tapped事件来对用户点击事件进行处理。微博文本里面的用户名、超链接、话题难免会被用户点击,使用TextBlock可以更方便的获取用户点击内容,判断用户点击的是用户名、超链接还是话题。对于用户名和话题的处理很容易也很简单就不展开说明,而超链接的处理是比较重要的。

在微博支持评论图片和转发图片之后,以及微博本身支持的视频,现在微博的超链接不仅仅可以是网页,还可以是视频,是图片,而用户希望能够在客户端完成对视频或者图片的查看,而不是跳出到浏览器,并且现在微博网页看视频看图片需要登陆,一些用户并没有在网页登陆,这样这些用户查看视频查看图片就会很麻烦,所以需要在客户端内置对视频和图片的查看。

微博API有一个可以获取短链接富内容信息的API(参见:http://open.weibo.com/wiki/2/short_url/info)根据这个API,我们可以获取到用户所点击的链接的详细内容。很明显这个API的文档并不全面甚至还有些错误,只能通过一些测试来确认,具体过程略过。根据获取的详细信息,如果是微博图片的,我们就显示图片,如果是视频,那就播放视频,如果都不是,那就弹浏览器吧。

不过微博有些视频的链接会返回403,这个问题还有待解决

 

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据