校招项目轻松学：电影详情模块——开发文档设计实战

哈喽大家好，上节课我们看了推电影项目电影详情模块的产品原型图，今天呢，我们来进行第二节课，前端的开发文档设计

一说到写文档，大家就觉得不敢下手，这是很多学生的通病，每个公司都有自己的文档格式，我们写文档是一个精简版，写出重点，一方面是自己开发过程中不会出问题，第二是为了方便后面的开发。

一、下载地址

本课程涉及的官方版开发文档，关注【校招VIP】公众号，回复【2006】，可自行下载开发文档

这个图是产品原型图，大家可以去公众号下载。现在公司里面很少有直接用word来进行开发，因为我们最后是要提供下载，所以就以这种模式来做。

二、课程重点

1、基本信息

首先特权写两行。注意两个事：标题两行，后面的上映时间不要流出来。电影时间是多长，后端会把它对应成一个ID，前端需要写死他。

2.  电影类型和电影地区

后台文档会给出一个对应的枚举值，项目内要固定，这个变动会很低频，它不是动态的，如果是在数据库里面的话，那就不能写死。

3.  电影评分

要求要有小数。比较麻烦是这个观影渠道，观看渠道这种方式叫一级展示，如果是第三方平台，他不会写爱奇艺的。

三、项目难点

1.锚点。  锚点跳到页面下方的观看渠道模块，这个地方的问题是怎么跳。最好是在做之前就定下来。有些难题，有同学说很简单，直接做一个HTML跳转。ID跳转实际上是发生跳转了，页面多了一层，等发现点后退时，他还是在当前页面，但它加载了一个新的页面调用。

2.使用高度。 使用高度值去重新定位展示，高度值的变量，指定跳转位置，这是我们最终要选择的方式。但是这有个问题，你会发现往下跳的时候，如果给个固定的地址，那实际上这个地方还有展开收起功能，它的距离可能会变。就等于是要重新去计算到上面的距离，要去实时计算。

面试官的第一个问题，亮点为什么不行，后面的HTML5的那些问题肯定会问上去。

2.  演职员

这是比较简单的左右滑动，这里面第二个难度是tab跟下面的滚动。 因为它是个锚点，锚点tap与页面对应位置滚动的双向绑定，所以实现是一个难点。

3.  展开收起

这是原型图的UI，上面会说这个展开收起必须放在这个位置上，怎么能够展开正好放在这，而且不压字。那么这个时候有可能计算的话，你会把它盖住，把它往前改也可以啊，这是一种方案。

但是商用的话要求严格，是可以用JS来实现，也可以用纯CS来实现。是各自选择，但CS3可以实现最优化的结果。因为JS的变动是没法控制的，为了保证展开的时候定位准确性和兼容性，那么CS3可以实现。

虽然就一个页面，但是有三个大的功能，有的同学说太简单了，但你做和不做，要求高和不高，实际上都是很多同学最后搞不定的一个原因。

好啦，今天的分享今就到这里。