任务一项目开发准备

产品需求文档

产品需求文档（Product Requirements Document，简称PRD）是对产品需求的描述，比如产品定位、结构、业务逻辑、功能等等。产品需求文档在项目研发各个环节起到至关重要的作用，一份清晰的需求文档能够说明“项目是什么”、“要实现哪些功能”、“页面跳转逻辑”、“交互效果”等等，可以减少开发期间的沟通成本，提高开发效率。

产品需求文档的主要使用对象有：开发、测试、项目经理、交互设计师、运营及其他业务人员。开发人员可以根据需求文档获知整个产品的逻辑；测试人员可以根据需求文档创建测试用例；项目经理可以根据需求文档拆分工作包，并分配给开发人员；交互设计师可以通过需求文档来设计交互原型。可以说，产品需求文档是项目启动之前，必须要通过评审确定的重要文档。如果需求分析做的不好，将会严重影响后面的开发进度，严重时会拖垮整个开发团队。因此，团队中的每位参与者都要认真履行自己的职责，确保整个项目的成功。

页面设计图

顾名思义页面设计图用来展示项目的页面效果，由UI设计师制作，前端开发者则需要通过设计图来制作静态页面。为方便开发人员使用，“启嘉校园”项目使用MasterGo设计软件制作，生成了能够查看设计标注、下载图片素材的在线设计图。读者在后面章节完成静态页面内容制作时，可参考设计图进行。

“启嘉校园”设计图地址：book.change.tm/u/a2。

如何查看设计标注

打开在线设计图，点击选择设计图其中的一个元素，页面右侧信息栏则会出现元素的样式信息，比如宽高、背景色、文字颜色、位置等等。

当我们选择一个元素后，鼠标移动到另一个元素上时，可以查看两个元素之间的间距。

如何下载图片素材

打开在线设计图，点击需要下载的图片，然后点击页面右侧信息栏下方“导出”按钮，即可下载图片素材。

字体图标

字体图标是在项目中通过字体形式使用的一种图标，在现在开发中用来替代图片展示页面中图标，其原理是将图标制作成矢量字体文件，使用时如同在CSS中引入字体文件一样引入字体图标文件。字体图标已经成为现在软件开发中解决小图片问题的常见手段，相比传统的图片资源，字体图标更加简单、快捷，减少网络通信。因此，开发人员一定要紧跟技术发展，与时俱进，才能选用最优的解决方案完成开发任务。

目前国内项目比较常用的字体图标库为阿里巴巴矢量图标库（https://www.iconfont.cn/），使用方法主要有以下两种：

unicode引用

unicode是字体在网页端最原始的应用方式，使用步骤如下：

第一步：拷贝项目下面生成的font-face

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot');
    src: url('iconfont.eot?#iefix') format('embedded-opentype'),
    url('iconfont.woff') format('woff'),
    url('iconfont.ttf') format('truetype'),
    url('iconfont.svg#iconfont') format('svg');
}

第二步：定义使用iconfont的样式

.iconfont{

  font-family:"iconfont" !important;

  font-size:16px;font-style:normal;

  -webkit-font-smoothing: antialiased;

  -webkit-text-stroke-width: 0.2px;

-moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<i class="iconfont">&#x33;</i>

font-class引用

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。使用步骤如下：

第一步：拷贝项目下面生成的fontclass代码

//at.alicdn.com/t/font_8d5l8fzk5b87iudi.css

第二步：挑选相应图标并获取类名，应用于页面

<i class="iconfont icon-xxx"></i>

“启嘉校园”项目使用的是font-class引用方式，字体图标文件和css文件下载地址如下：

字体图标文件：book.change.tm/u/a3。

css文件：book.change.tm/u/a4。

下载后的文件存放目录和使用方法将在第二篇章中讲解，此处可先将文件下载保存到便于查找的本地磁盘中备用。

接口文档

接口主要用来向开发者服务器传递数据，接口文档即应用程序接口的说明文档，又称为API文档，用来描述系统所提供接口信息的文档。接口文档类似于机器的使用说明书，一般由开发人员编写，是前后端开发人员协调工作的沟通“工具”。通俗的讲，接口文档能告诉开发者接口的使用方法、接收的参数、返回的数据等等，开发人员据此请求应用程序接口并处理返回的数据。读者在后面章节实现功能时，可参考接口文档完成页面中数据的请求与展示。

“启嘉校园”接口文档地址：book.change.tm/u/a5。

项目源码

因“启嘉校园”项目功能比较完整，代码量大，所以本书在讲解时将部分非核心讲解的代码进行了省略，读者若需要完整代码可以到“启嘉校园”项目源码下载并查看，同时可以在学习过程中遇到问题时参考项目源码解决。

“启嘉校园”项目源码下载地址：book.change.tm/u/a6。

任务一 项目开发准备 #

产品需求文档 #

页面设计图 #

如何查看设计标注 #

如何下载图片素材 #

字体图标 #

接口文档 #

项目源码 #