前端小白的第一个H5项目——福大助手年度总结报告2020的背后

• 本次项目作为福大助手的第一个H5项目，当交给我这个B届的小白的时候，我感受到了责任的重大，这个项目不得不做好，但又没那么可能做好，原因是之前我没有vue的项目经验，只是学习vue的时候做了一个类似去哪儿网的一个界面

以下需要反思的问题：

• 卡顿
  安卓端卡顿，ios表现良好，在查询的时候说是CSS3动画在ios和安卓上优化不一样，ios优化更好，于是查询了如何优化CSS3动画，首先要开启硬件加速，用了这一个CSS3属性-webkit-backface-visibility: hidden 其次动画不能影响页面layout，因此最好采用以下几种变化

  • opacity 透明度
  • translate X, Y, Z
  • rotate X,Y,Z
  • scale

  然而方向歪了，结果并不是这个导致的卡顿，仍然很卡，整了一两天，由于查到的基本上都是css3动画导致的安卓机型表现卡顿，所以很迷，后来发现是由于图片太大了，我以前认为这是预加载或者没显示出来，并不会导致卡顿，没想到，居然会。果断压缩了图片文件，就都不卡了。

• 预加载
  之前没有这种需求，由于做的基本是pc端网页，网速快的很，加载很快，图片一下就加载出来了，但是在手机端网速慢的话，极大的影响了用户的体验，因此提出了一个loading页面即预加载的需求，预加载的时候应该加载图片，加载图片的时候可以用require，存进缓存中，后面在页面之间来回滑动的时候就会舒服很多。

• 架构
  这次做的时候深深的感受到了架构的重要性，一开始的时候实际上整个报告都是用vue-awesome-swiper这个插件来组织的，每个页面都可以向上滑或者向下滑，但是后来逐渐加了需求，加了一个预加载的页面，即loading界面，放在这个插件中显然不合适，总不能加载的时候可以往下滑吧(hh)，然后就用了vue-router设置了路由，让loading界面和报告分开了，当然，这就出问题了，loading界面和报告分开了，如果用户分享的是报告，我又在loading这个界面加载了数据，那岂不是如果从报告页面分享出去的连接没有数据吗。这也是一个架构的问题了。估计以后要将loading这个界面放在报告界面中，当加载完毕的时候隐藏掉就可以了。保证用户在任何地方分享都可以成功加载数据。后来只好做了一个workaround，当在报告界面没有发现学生信息这个数据的时候，强制跳转到loading界面，再从loading界面进入报告界面，这样确实不够好。另外除了这个还有比如一开始就应该想好用什么插件，如何组织，想清楚哪里怎么怎么做，而不是边做边想，这样到最后改都改不了。比如我在很多插件里引用了querystring，应该在main.js中一次性引入即可，还有前面想用animated.css后面又不想用了，导致很多地方用.animated这个类，于是也不敢再main.js中去掉这个插件了，以防整体出问题。

• 自适应
  或许做css3动画，考虑的自适应问题就更多了，无法单纯的使用百分比，否则css3动画如果有关联的一些动画会出现问题，因为每个元素的宽度高度都不一样，而这个宽度高度和机型有关，不同机型所呈现的动画会有偏差，于是自己写了一个自适应的代码，但是感觉不够优雅，不过貌似这个方案最为可行，还有自适应方案例如 rem, em, 百分比或使用element-ui, bootstrap提供的布局, @media这样的都不可行，貌似只有这样才可以，这个想继续学习求知。

• 上线
  之前没有经历过项目上线的问题，如何配置，根本不知道，这次也学到了比较多，比如在assetsPublicPath: 这个参数里面可以加上放在服务器的一个源路径，以及baseUrl， process等等问题，还有很多这种问题需要注意,webpack也还要学，否则这一块就基本靠蒙。。

还有一些问题：
UI 其实UI的图的分辨率总有问题，虽然我这边可以修改，但是还是希望图片的大小背景图片等等可以一致，我这边修改大小多多少少会导致有偏差的问题