转载

必应词典UWP版-开发小结

摘要

必应词典UWP版已经上线2周了！相信有不少用户都已经体验过了吧！得益于Win10全新、强大的API，新版词典在性能上、UI体验上都有了大幅的提升，今天，小编就为大家讲讲必应词典UWP开发的故事。另外，欢迎大家体验我们的app，并向我们提供宝贵的意见!

下载链接：

https://www.microsoft.com/zh-cn/store/apps/%e5%be%ae%e8%bd%af%e5%bf%85%e5%ba%94%e8%af%8d%e5%85%b8win10%e7%89%88/9nblggh63sw0

第一印象

必应词典UWP版-开发小结

先来两张我们app的靓照，大家有没有觉得界面清爽呢？我们的UWP对各种尺寸的屏幕、各个尺寸的窗口都有相应的适配。在较窄的屏幕或窗口下，我们使用汉堡键和SpliteView作为页面切换的控制，而在较宽的屏幕上我们使用的则是Tabs，这样能更合理的增加屏幕有效内容的显示，也符合windows app设计的标准。关于内容的显示，我们也是在不同尺寸窗口下会有不同的表现，您注意到了么？

开发的故事

词典的靓照就欣赏到这里，接下来我们讲讲必应词典的开发，比较工程地讲，必应词典的Solution主要由以下几个核心的Project构成：

必应词典UWP版-开发小结

其中，Fundamental主要包含词典数据的Schema、App Settings、Constants和一些辅助工具类；Storage，顾名思义，封装了词典关于存储的接口；Query Engine，则是查词逻辑的核心；Word List实现了生词本的功能；而Adaptive UI，就是我们看到的页面显示。

Storage

必应词典UWP版-开发小结

关于存储，可以根据需要的不同，可以分为File、Dictionary、Cache三个部分，File Manager实现了对本地文件的操作，包括存储、读取等等。在我们的词典中，封装着一个用户本地词典，便于用户离线查词，里面的数据是用sqlite数据库存储的，Dictionary Manager，主要是对本地词典的操作，包括查询、记录历史等等。Cache Manager，主要用于管理用户访问网络的Cache数据，以键值对的形式存储。而Cache本身又分为两层，Disk Cache和Memory Cache。Disk Cache在storage中使用sqlite存储，使得查询效率更高。我们知道，memory的访问速度，是远大于Disk的访问速度的，所以在Disk Cache的基础之上，我们还有一层Memory Cache。同时Memory Cache基于LRU的置换原则，也不会占用过多的内存开销，使查询更为快捷。

Query Engine

必应词典UWP版-开发小结

查词功能，是我们词典的最重要内容，包括很多内容的查询，可以分解为本地词汇的查询、网络词汇的查询、句子的查询、音频视频的查询、词语自动补全的查询等等。在Search box中查询，在Result Page中显示结果，这一过程是词典app的最重要的环节。在这一过程中，有多个查询步骤，Query Engine对外只暴露一个query接口，对于多次查询的结果分别反馈到监听查询的IQueryEngineListener中，而不是拿到所有数据后再进行反馈，这样使用户在查词过程中就会有一个比较连续、流畅的体验。

Word List

必应词典UWP版-开发小结

生词本的逻辑相对比较简单，基本就是sqlite数据库几张表的查询，但是比起之前版本xml的存储结构，性能上有了很大的提升。

Adaptive UI

必应词典UWP版-开发小结

UI部分，在文章的开始部分已经介绍了，这里要说的是，大家看到的页面，可不是由一个Page完成的哦，确切来说，在app的每个页面中，映入我们视线的，都是由两个Page构成的，如下图所示：

必应词典UWP版-开发小结

最外层的页面，我们叫做Main Frame，包括汉堡键、Split View、Tabs、Query Bar等等，实现对app页面的切换等等。上图中用红色边框框出来的部分，是用来显示app内容页面的，我们叫做Content Frame。这样的实现，使页面逻辑更加清晰，维护也更加方便。关于嵌套式页面的实现，请参考另外一篇博文: UWP开发笔记——嵌套式页面的实现（ http://www.cnblogs.com/ms-uap/p/4860121.html ）。

在页面的适配上，VisualStateManager，为我们提供了强大的接口，具体响应式UI的开发方式，请参考Windows10 UWP开发 - 响应式设计（ http://www.cnblogs.com/ms-uap/p/4536459.html ）。

这就是我们app的一个大体结构。