下载掌阅APP，畅读海量书库
立即打开
产品需求文档（ Product Requirements Document，PRD）是对产品需求的描述，比如产品定位、结构、业务逻辑、功能等。产品需求文档在项目研发各个环节都会起到至关重要的作用，一份清晰的需求文档能够说明“项目是什么”“要实现哪些功能”“页面跳转逻辑”“交互效果”等，可以减少开发期间的沟通成本，提高开发效率。
产品需求文档的 主要使用对象 有：开发人员、测试人员、项目经理、交互设计师、运营人员及其他业务人员。开发人员可以根据需求文档获知整个产品的逻辑；测试人员可以根据需求文档创建测试用例；项目经理可以根据需求文档拆分工作包，并分配给开发人员；交互设计师可以通过需求文档来设计交互原型。可以说，产品需求文档是项目启动之前必须通过评审确定的重要文档。如果需求分析做得不好，就会严重影响后面的开发进度，严重时会拖垮整个开发团队。因此，团队中的每位参与者都要认真履行自己的职责，确保整个项目顺利进行。
“启嘉校园”产品需求文档（见图1-2）为在线文档。在线文档地址为https://book.change.tm/u/a1。
页面设计图
顾名思义，页面设计图用来展示项目的页面效果，由UI设计师制作，前端开发者则需要通过设计图来制作静态页面。为方便开发人员使用，“启嘉校园”项目使用MasterGo设计软件制作，生成了能够查看设计标注、下载图片素材的在线设计图。读者在后面章节进行静态页面内容制作时，可参考设计图完成。
图1-2 “启嘉校园”产品需求文档
“启嘉校园”设计图地址为https://book.change.tm/u/a2。
打开在线设计图，单击设计图中的一个元素，页面右侧信息栏就会出现该元素的样式信息，比如宽、高、背景色、文字颜色、位置等，如图1-3所示。当选择一个元素后，若将鼠标移动到另一个元素上，则可以查看两个元素之间的间距，如图1-4所示。
图1-3 样式标注
打开在线设计图，单击需要下载的图片，然后单击页面右侧信息栏下方“导出”按钮，即可下载图片素材，如图1-5所示。
图1-4 元素间距
图1-5 导出设计图
字体图标是在项目中通过字体形式使用的一种图标，在现在的软件开发中用来替代图片以展示页面中的图标，其原理是将图标制作成矢量字体文件，使用时如同在CSS中引入字体文件一样引入字体图标文件。字体图标已经成为现在的软件开发中解决小图片问题的常见手段，相比传统的图片资源，字体图标的使用更加简单、快捷，可减少网络通信量。因此，开发人员要紧跟技术发展步伐，与时俱进，这样才能设计最优的解决方案来完成开发任务。
了解uni-app 03之官方介绍上
目前国内项目常用的字体图标库之一为阿里巴巴矢量图标库（https://www.iconfont.cn/），使用方法主要有以下两种。
unicode是字体在网页端最原始的应用方式，使用步骤如下。
第一步 ：复制项目下面生成的font-face。
第二步 ：定义使用iconfont的样式。
第三步 ：挑选相应图标并获取字体编码，应用于页面。
font-class是unicode使用方式的一种变种，主要解决unicode书写不直观、语意不明确的问题。使用步骤如下。
第一步 ：复制项目下面生成的font-class代码。
第二步 ：挑选相应图标并获取类名，应用于页面。
“启嘉校园”项目使用的是font-class引用方式，字体图标文件和CSS文件下载地址如下。
● 字体图标文件：https://book.change.tm/u/a3。
● CSS文件：https://book.change.tm/u/a4。
下载后的文件存放目录和使用方法将在后续任务中讲解，此处可先将文件下载并保存到便于查找的本地磁盘中备用。
接口主要用来向开发者服务器传递数据，接口文档即应用程序接口的说明文档，又称为API文档，用来描述系统所提供的接口信息。接口文档类似于机器的使用说明书，一般由开发人员编写，是前、后端开发人员协调工作的沟通“工具”。通俗地讲，接口文档能告诉开发者接口的使用方法、接受的参数、返回的数据等，开发人员据此请求应用程序接口并处理返回的数据。读者在后续任务实现功能时，可参考接口文档完成页面中数据的请求与展示。
“启嘉校园”接口文档地址为https://book.change.tm/u/a5。
了解uni-app 04之官方介绍下
因为“启嘉校园”项目的功能比较完整，代码量大，所以本书在讲解时省略了部分非核心代码，若读者需要完整代码，则可以从启嘉书盘中下载“启嘉校园”项目的源码，学习过程中遇到问题时可参考项目源码解决。
“启嘉校园”项目源码下载地址为https://book.change.tm/u/a6。