博客园客户端(Universal App)开发随笔

时间:2022-10-11 09:26:38

前言

本篇随笔主要是分享一下做一个Universal App的目录组织结构,说明什么样的结构才能适合一个团队开发,使开发成员之间的相互影响最小。这些组织好的项目和目录会成为一个公共的规约,大家都能知道什么东西应该放在哪里,或者在什么地方能找到什么功能。这对于避免重复写code或者最大限度地复用code来说是至关重要的。

这种工程结构和目录划分虽然没有什么理论基础,但是是经过我们很多项目的经验总结出来的,如果是个人开发者,也严重建议参考此组织结构,能够帮助你理清思路,做好功能设计和类设计。

项目组织

开发一个Universal App, 如果前篇所说,基本框架在VS里有了(对不起我这里不小心装了个英文版),先选Universal Apps,再选Blank App,再把App1改成CNBlogs,就可以猛击OK了。

博客园客户端(Universal App)开发随笔

它缺省会帮你建立三个projects:CNBlogs.Windows(Windows 8.1)和CNBlogs.WindowsPhone(Windows Phone 8.1)。还有一个特殊的CNBLogs.Shared,扩展名为.shproj,是被上面两个project共用的。

如果做一个简单的UAP,这三个project就足够了。但是如果涉及到团队开发的较大的项目,还要有其它一些辅助的Project和其下面的一系列Folders才能够应付。如下图所示:

博客园客户端(Universal App)开发随笔

我们建立了以下辅助project:

1)BackgroundTask

2)DataHelper

3)NotificatoinsExtensions

说明如下:

1)BackgroundTask主要完成的任务是后台更新动态磁贴。这个以后我们说到Windows/Phone的后台任务时,会专门解释。

2)DataHelper,里面有两个folder,一个CloudAPI,里面针对每一个DataSource(API接口)都有个一个单独的类来处理,还可以根据各个DataSource的相似度,来抽象更底层的类。另一个是DataModel,就是数据模型类。这个DataHelper我们后续的CloudAPI篇里会仔细说。

博客园客户端(Universal App)开发随笔

3) NotificatoinsExtensions 这个其实不是我们自己写的,是直接从MSDN里的sample里下载的(按照微软的建议,但不明白为什么不做成一个库,而是以源代码形式给出)。这个项目里主要给出了一些帮助方法,来简单地更新磁贴,否则就要直接操作XML数据来更新磁贴,非常容易出错,而且不容易理解。这个以后讲动态磁贴时才细说。

在这个有个问题:为什么DataHelper project不放在Shared里面呢?原因特简单:因为BackgroundTask也需要访问DataHelper, 如果放在Shared里面访问不到,因为Shared只为Windows/WindowsPhone两个Project服务。(如果这里我的理解有什么错误请大虾们指正)

目录组织

我们着重说一下Windows, WindowsPhone, Shared三个Project中的文件夹。

CNBlogs.Windows(Windows 8.1)

博客园客户端(Universal App)开发随笔

1)Assets

里面装着那些图像文件,一般有三类:A) Tile类,只为磁贴而做;B) Image类,只为背景图,装饰图之类的而做;C)Icon类,放在AppBar中的图标。如果项目较大,图像文件较多时,可以在这个文件夹下建立三个子文件夹,分别为Tile, Image, Icon。

2)Common

这个是系统自带的。如果系统没有生成这个文件夹,你在添加一个新的Page时,指定BasicPage,就可以生成它。这个文件夹里有个4个文件,包括了很多帮助函数,供处理Navigation时是使用。轻易不动它。

3)Controls

这里放着你的小宝贝们,就是那些Template Control,或者User Control。如果是Template Control, 这里面只放一个XXXControl.cs; 如果是User Control, 这里面放一个XXXControl.xaml, 下面附带了XXXControl.xaml.cs。关于这两种Control的区别,我们后续有专门的一篇博客讲解。

5)Pages

这里面放着你的大宝贝们,就是那些页面啦。每个页面都有个单独的XAML和其下面附带的.cs文件来描述其样式和行为,以及和其他页面的交互关系。

6)SettingFlyouts

Windows中的设置页面比较特殊,在右面,是一种规约,鼠标右键或者轻扫右侧边框弹出5个系统按钮,按下面的“设置”即可进入某个App自己的设置页面。这些设置页面其实也是用XAML来表现的。

7)Themes

这里放的是Template Control的样式,只有一个Generic.xml,里面放了所有自定义Template Control的样式(User Control不在这里)。不需要把它挪出来放在别的什么地方,别有洁癖,谁知道移到别的地方会出什么错误。

Folder就这些了,各有各的用处,有的是系统建的,有的是你自己建的,目的只有一个,让自己和别人可以很快地找到东西。

有一个地方要注意,就是namespace。如果你在Project上右键添加一个Page, namespace是CNBlogs; 如果在Pages上添加,namespace是CNBLogs.Pages。都可以,但是要统一,否则要出麻烦。

CNBlogs.WindowsPhone(Windows Phone 8.1)

博客园客户端(Universal App)开发随笔

Windows Phone的Folder们和Windows的基本一样,只是最下面的Pages和Views的区别,这个只是习惯问题,您随便。

CNBLogs.Shared

博客园客户端(Universal App)开发随笔

Shared Project有些不一样了,我们细细说来。

1)Assets

如果Windows/Phone有相同的图像资源(样子/颜色/尺寸都相同),可以只放一份在这里。但是目前Windows/Phone的Tile有尺寸上区别,所以Tile部分要分开放。背景图之类的肯定也不一样,一大一小。ICON部分可能会一致,因为Windows和Phone下面的AppBar中AppBarButton大小一样。

2)ControlHelper

这里面一般放置两类cs文件,一类是TemplateSelector,另一类是Converter,就是数据转换类。这个我们在后面的博客中专门讲(记得提醒我,我已经承诺不少东西了)。这两类东西,对于Windows/Phone来说是共用的。

3)FunctionHelper

顾名思义,放的是你自己的通用的帮助函数类。

4)HTML

可有可无,看项目。如果项目中有用到WebView的,也许需要一些初始的HTML或者css。

5)SampleData

对于大多数应用来说,都需要data支持,有的是用本地data,有的用远程data。当data没有到位时(CloudAPI部分还没有完工),你可以先手工制作一些模拟data放这里,不影响开发进度。

6)Strings

这里面放的是Resources, 按国家/市场划分。比如我们只有一个zh-CN子目录,也许还有个ja-JP子目录,里面放着Resources.resw。这个样子的:

博客园客户端(Universal App)开发随笔

所有界面上用到的字符串都扔里面,比如在zh-CN中有个”Title \t 首页”,在en-US中必须有个”Title \t Home“来对应,以便在不同国家显示不同语言。

7)App.xaml和StyleDictionary.xaml

共用的,放这里没事儿。尤其是StyleDictionary.xaml,里面放着所有的颜色,字体,样式等信息,你在Windows上的应用使用蓝底白字,在Windows Phone上要统一用蓝底白字,就靠使用这个文件里的信息了。

小结

在本篇随笔中,我们强调了CloudAPI的重要性,是因为我们从很多成功的App中总结出云端数据和服务支持的重要性; 而削弱了MVVM的重要性,是因为我们从实践中体会到,Model和View都是不可或缺的,但是ViewModel就不是那么重要了,代码重复,可读性差,能替代它的方法很多。至于什么可自动测试性,根本谈不上。开发测试一体,有助于节约成本,提高工作效率,增强开发人员的责任心。

 

你可以从这里下载我们分享的源代码:

https://code.msdn.microsoft.com/CNBlogs-Client-Universal-477943ab

当然更可以直接下载两个App来看效果,但是由于designer介入较晚,所以UI上面还需要完善,我们会持续更新App。

Windows Phone Store App link:

http://www.windowsphone.com/zh-cn/store/app/博客园-uap/500f08f0-5be8-4723-aff9-a397beee52fc

Windows Store App link:

http://apps.microsoft.com/windows/zh-cn/app/c76b99a0-9abd-4a4e-86f0-b29bfcc51059

纯粹干净的App, 里面绝无广告,请放心使用。

分享代码,改变世界!