工作总结——H5站重构

公司移动端项目之前比较乱，主要以后端集成页面为主，后来开始搞前后端分离，技术栈是Vue全家桶，不过因为时间关系，并没有进行全站重构，导致公司移动端项目出现了既包含集成页面，又包含前后端分离页面，页面之间的逻辑也很凌乱，有集成的老页面和分离的新页面之间的逻辑交互，也有app客户端和老页面的交互，也有分离页面和app客户端的交互。不堪忍受之下，启动了全站重构的项目。

一、需求阶段

为了解决移动端页面因为两种不同的写法导致的样式，交互，以及迭代的难易程度等问题，特提出H5站重构项目。其页面风格以及基本功能参照app样式，还需要加入 PWA功能。

二、开发阶段

1、描述

项目主要模块分为：登录注册模块，个人中心模块，首页、投资页模块，积分商城模块。然后根据业务逻辑，个人中心和积分商城又分出一些子模块。

开发阶段前端和后端按模块任务同时进行开发

2、准备工作

项目由vue-cli一键生成，选择的UI框架是vux，使用postcss和sass，调试工具选择vconsole，可视化插件使用highcharts，上拉下拉使用插件mescroll

三、遇到的问题

开发 过程中遇到很多问题，现将一些比较复杂， 解决起来比较麻烦，或者实现起来不太完美的问题做一个总结：

1、ios橡皮筋效果

因为header和footer是使用浮动定位做的，ios又自带一个上拉下拉橡皮筋回弹效果，每次回弹页面的main会跟着有回弹效果，但是header和footer则固定在可视区域首尾，不参与回弹，这样一来，浏览器的回弹部分会遮盖header和footer，使页面看起来极为怪异。

尝试多种解决方案，要不根本无法解决，要不有各种瑕疵。最后使用的是一个css属性-webkit-overflow-scrolling: touch;（可参考这篇文章）。首先要设置页面高度为100%，将页面分为三部分，在main部分设置此属性。

这种实现方式我认为不是完美的解决方案，但是在各种条件下，我认为是最合适的一种方案，这种方案带来的问题有，会关闭ios上浏览器自动隐藏顶部地址栏和底部标签栏的功能，而且在页面触底后不能上拉，但是触顶后可以下拉，所以会给用户造成卡顿的感觉，体验不好。

2、vux的弹框背景锁定问题

这个其实主要是对vux布局不熟悉造成的问题，要实现背景锁定，必须实现页面高度100%布局才可以。而且，vux调用弹框组件时，是将弹框插入到body下的，所以会和问题1中的布局产生遮罩，以及部分样式上的问题。其本质是元素定位造成的兼容性问题，需要视具体情况做出相应的解决办法。

3、stickey效果

由于采用的上拉下拉插件必须给div一个固定值的高度，所以造成了stickey效果的无法实现，这个问题在和产品经理沟通后，定为暂不解决。

4、一些其他问题

刷新页面vuex数据丢失问题，iphone6s对sessionStorage的兼容问题，header中返回按钮逻辑问题，全局导航守卫问题，页面，接口统一报错处理等等，这些问题比较容易搜到，不作单独说明。

四、总结

此次项目重构历时2个月，初期是我本人和公司前端经理共同开发，后经理另谋高就，剩我一人直面所有问题，进入测试阶段后，天天看着几百个bug真真的体会到了无力的感觉，每天精神紧绷，一度还有失眠，索性扛了过来，在此要特别感谢我的小伙伴们对我的鼎力相助，祝愿他们早日找到女朋友，哈哈！