本课程涉及的官方版原型图，可关注【校招VIP】公众号，回复【2001】，可自行下载产品原型图。
VIP的服务，不一样的校招。 大家好，我是校招VIP的大拿老师。今天，开始我们前端实战项目的这个课程。
在线实习项目推电影，以后的第一期，一方面尽量让同学可以用实习的模式去做，另一方面呢，对一些入门可能比较难的同学，我们第一期还是希望以课程的模式来进行一个同步讲解，希望大家第一期能够很好的理解，第二期以及后面的这个正常逻辑的进行啊，大家进展会更顺利一些。
第一节课是产品原型图功能的理解，这个项目是真实的在公司内部要去开发的，是大学生的知识需求的项目。现在很多的中厂和大厂的面试，因为在校招环节里面，人数特别多，所以面试官需要去辨别。但是大部分的简历项目是重复度比较大，那面试官直接扔掉。
在一个商用环境下，大家一定要去理解产品有哪些功能，这个产品功能最主要产出就是个原型图，所以要理解这个概念。
对任何的一个研发角色，不管是UI、 Java、前端还是测试，大家都要懂产品，不懂产品的开发不是好的CTO。
真正的要去做一个有迭代的产品，业务逻辑才是我们做开发能够入门或者能够往上提升的最根本的。
首先原型图是什么。 产品同学呢，要想这期任务是什么逻辑，里面有哪些点要做呢？它是怎么一个流程，他是怎么一个解决方案，他弄好之后呢，这个时候会给我们整个研发团队去开会。UI同学呢，会拿原型图做成高保真图，也就是我们所说的那个UI的设计图。这个时候前端，包括Java后端，要看原型图的功能去设计，里面有什么难点要去解决掉。
商业开发因为时间周期是比较短暂的，大家排的都比较满。这个时候，一定要注意，不是在开发工作中发现问题，然后再反过来重新做，而是在做文档设计的时候，难的我们就确定下来，你的团队也好导师也好，会给你说这个解决方案不行。等到开发的时候，基本上思路都是都是成型的，你只要按照我们约定的方式去做，那基本上不会少功能，也不会错功能。开发不是等到UI的图出来，而是我们按照原型图的逻辑接口先做好，做好之后UI同学再做好图。
第二部分，就回到电影详情模块，也是上影项目的第一个模块，它最核心的一个功能点，就是我们说做一个demo。它的基本信息，它的特点在哪个地方，要注意这个是商用产品的要求，所以很多前端项目大家都不知道怎么写，或者不知道亮点在哪个地方。
你的面试官，他是一个资深的前端工程师，所以在这种标准下，要求你必须实现这个功能而不能妥协，你的能力和解决问题的难度，也就是我们面试的时候需要考察你的这个东西。或者说很多的学生进入到大厂区实习，实际上他不会去写框架，实习的时候不会让你去做框架，任何一个公司不会让实习生过来开发框架。
我们课程的目标，是通过真实的一个商品需求，让大家一步一步的去真实的进行一个文档的设计。接下来看一下这一期的产品原型图。
这个项目第一期，相对简单一点，因为它就是一个页面，所以逻辑而且比较常见，但是一定要注意他的细节。我们开发同学最忌讳是光看不做。在任何一个大型公司里面或者中型公司里面，他的C端产品，它的登陆模块是最重要最核心的，不能出任何问题，所以需要真的动手能力。
那么看一些产品需求。一般来说还有一个产品开发文档。首先，这是一个页面，然后这边他的封皮在这儿，他的基本信息肯定是通过接口传给我们。第一步呢，先设计我们自己的逻辑，第二步呢，后端会有一个接口规范。我们先写开发文档，第二行呢，不超出两行，最后显示年份，要注意到在什么时候截断。如果这个名字很长，是不是把名字截断，然后再加个2014，还是说根本就不显示2014呢。要注意这个东西，因为年份是重要的。这个时候一般来说要强调字数，但是这这次产品的同学给出一个逻辑，就是我们的电影的名字呢，一般来说不会特别长，所以大家一般不用去判断它的长度，两行超出做出来就好了。
然后下面呢，是它的时间，以分钟计算。然后他电影类型和上映地区这两个后台给出枚举了。注意我们是一个初创项目，这个时候电影比较少，你要把特色做出来。所以早期呢，我们把品类收起来，后台会给出一个枚举值，但是因为前面的变动比较少，所以后端给完之后，开发前端会做出一个设定，这个会写死。但注意，传给后台的时候一定是传给ID的，大家不会传文本，文本在前后台接口传递的时候，它是有很多的问题。
我们有自己的评分，就上映评分，它是带小数点的，你看后面几个案例，哪怕他是一个整数，也要显示一个小数点。然后观看渠道。观看渠道什么意思呢？我们自己是推进的平台，所以我们自己不做播放，因为播放本身有版权问题，我们就暂时不去碰这一块儿。这个地方是一个第三方，第三方会有最多三个具体的网站链接点进去。
很多同学不知道怎么实现，那其实这就是个功能点，你点后退的时候，他就出现了二次跳跃了，所以这个地方就是很简单的功能，但是你会发现它是一个亮点，因为他后面会引申出很多的提问点，所以不管是实战还是面试，很多东西是你在做的时候发现它有多种解决方案。不管是中厂、大厂、小厂，你的面试官肯定是个工作多年的前端，他就会知道你作为一个新人，作为校招的同学，应该可以是这个范围内的。
那第二点的话就是说锚点tab。点击之后不是页面切换，因为他是这是一个很常见的交互，点完之后会蹦到对应的地方。比如电影介绍就不用蹦，他在这个地方，特色推荐的是电影。后面还有一个影评，有同学说这个原来没有做对，后面可以自己加一个影评，道理是这样，同级别的能跳转就好，因为影评呢，后面是个单独的模块啊，因为详情页是所有业务的一个入口，所以到时候做好了再加个路口就好。
锚点tab意思就是点完之后往下蹦，要注意它的切换，也就是他划到这个手机顶部的时候，他能固定在这个地方，另外呢，随着页面的上滚，比如说推进在这个地方，如果这个滚上去的话，它的选中状态一回来，也就意味着实现tab的锚点和对应的位置的双向绑定，这是一个 比较难的地方，有些同学是实现不了的。
第三个事情的话就是展开收起。 那这个展开收起呢，现在画的比较简单，其实这两个互斥的，但实际上我们的需求是希望展开是在默认展示四行的最后，最后一行的位置上，如果是严格要求这个定位的话，实际上难度是比较大的。因为你放个盒子卡在这儿的话，可能会盖住两三个字，盖一半的话感觉就很丑，那这个就不满足我们商业化的一个需求。
展开收起的绝对定位，那么它的实现方式怎么能够完全达到一个兼容性，或者是合适的展示，让这三个亮点足够撑起这个模块。一个项目亮点四到五个，那光这一个小模块就两到三个亮点，如果再做两三个模块，你就比别人有优势。
大家关注后续的项目实战课程可以关注校招VIP，这个市面上现在没有这套课程啊，对大家的校招、实习、能力增长，完全有很好的一个提高。