面临现在如火如荼的前端技术、视频直播带来的巨大的商机，再加上现在世界为之疯狂的5G，接下来的前端，如果还没接触过多媒体应用，一定会被淘汰掉。刚好最近几天嗨学App上看视频，就模仿了一个WebApp应用，小试水一下。此 demo 没有用 keep-alive 等任何缓存，有需要缓存的可以自行加上。
项目地址：HighToLearn
我这也是第一次在应用里加入视频播放，结合在平日工作中遇到的问题，总结一下需要注意的点：
注意的 点
-
组件的合理划分，以及提取
并不是说单纯的写个公共样式，相同结构的部分添加相同的公共样式就是划分组件，不是，真的不是。
在实际工作中，项目开发前，我们会捋一遍所有的页面，把页面划分组件，把公共部分提取出来，写好结构，作为公共组件，在需要的页面直接引入，只需传入数据即可正常显示，这才叫公共组件的划分和提取。真的不是说，写一大堆公共样式，每个页面的公共部分用公共样式重新写一遍，这不叫组件划分，更不叫组件提取，这叫冗余代码
在划分组件的时候，要注意哪些是广告组件，广告组件要单独提取，方便替换！！！
-
公共底（footer）的处理
公用 footer 的处理，非常简单，改变活跃项的图标背景色，字体颜色，其余的不变，仅仅是换个图标 => src/components/footer.vue
这里不需要去重新设置这个图标的大小，更不要为难 UI 设计师，让 UI 设计师切图决定一切。这个部分的处理，个人感觉，可以非常直接的看到一个人的技术水平。
-
vue 项目中视频的播放 => vue-video-player 插件
vue-video-player 插件播放视频，这个插件是否支持视频直播，还未亲测，据说可以，但是需要另装插件。另：项目有用到视频播放的童鞋，可以了解一下 西瓜视频播放器 。
-
项目页面首次加载的处理
首次加载，只加载我们需要的页面就可以，尤其注意首屏加载的用户体验 => router.js
首屏加载，不需要加载全部的组件，而我们在 router.js 直接 import 组件，其实是一次把所有的组件全部引入，引入完成之后才去渲染页面。如果页面很多，对应的组件很多，组件的加载速度过慢，首页加载就会非常慢。
在首屏渲染的时候，用懒加载（或按需加载），非常有必要
-
关于cube-ui scroll组件的使用
在题库页面里，加入了 scroll 组件，为了防止小手机上页面过长，下拉或者上滑时没有弹性效果。然后就出问题了。只要从题库页面过一下，接下来的页面，肯定不能上下滑动……想了半天，发现是因为在题库页面，给 cube-scroll-content 设置高度的时候，没有指定哪个页面下的 cube-scroll-content ，导致这个高度成了公用高度。这里尤其注意。
-
子路由的设置
学习观摩了好多前辈的代码，突然发现，好多人竟然还不会设置子路由……好吧，子路由是这么设置的：
这个路由进入的首页是 index 下的 finding 页面 第一个子页面，子路由 path 设置为空，表示路径默认为父级页面的路径。不是说别的写法不对，这种写法，应该会比较简洁一点。
-
登录页面的操作优化
登录页面，点击账号区域，或者密码区域的时候，能够迅速调起键盘，可以解决输入区域过小，点击反应不灵敏的现象。
原理是：扩大了点击区域，利用事件捕获不可阻断的特性，在点击父级区域的时候，直接聚集到输入框，提高用户体验。这是一个小细节，许多输入框太小，不方便点击的操作，用户点击多次不能聚集到输入框的操作，可以利用此方法，提高用户体验
-
用 cookie 做登录判断
正式项目里非常不推荐，但是自己写 demo 的时候可以用一下。关于 cookie 有效期的存取，我也一直没搞明白，为什么明明存上了cookie有效期，就是取不到，如果有童鞋对 cookie 精通的，望不吝赐教！拜谢！
项目实际运用里，只需要在首次登录成功的时候，后端记录下登录成功的时间，接下来数据请求的时候，拿当前时间和记录的登录成功的时间做对比，如果超出设置的过时时间，比如说 30 分钟，直接返回固定值（这个值可以和前端商量好），前端收到这个固定值，直接跳转至登录页面。不需要在每次跳转的时候，单独调一次验证接口去验证是否超时，单独验证其实相当于凭空增加接口服务器的压力。在页面跳转的时候也去调用，试想一下，如果你的项目里有100个跳转，那就凭空增加出100次接口调用，扯淡不？
自曝：项目中的不足之处
项目里，有几处不足：
-
上面有提到，cookie 明明存了有效期，在页面跳转的时候想做过期验证，结果拿不到，现在问题是找到了，还没有找到解决方法。百度上搜出来的，都是复制的文章，没有一点意义。
-
环形进度条，尝试了多次，单个静态的定值环形进度条可以写出，涉及到多个的时候，就不行了，在掘金上搜了一个3年前的插件 v-circle，但是无论如何不能成功引入。尝试自己去写，也没有写好。
有清楚的童鞋，望不吝赐教！拜谢！
