项目复盘分享
11月24日 需求评审
11月25日到30日 项目排期（设计排期和开发排期）
12月01日 项目技术评审
12月02日 项目内部细节讨论
12月03日 王者账号推广H5 UI评审
12月04日到12月16日 项目开发
12月17日到12月27日 与后端联调以及自测
12月27日 代码review
12月28日到12月31日 测试、UI走查
11月24日 需求评审
原型地址
第一眼看到H5原型的时候感觉挺多的有点心慌慌（也是第一次开发H5），但是拆分一下感觉还是挺简单的，除了与客服聊天拉起QQ没有头绪之外，其它的UI组件与插件基本上都能满足项目需求。
原型是产品经理出的，不懂的或者不理解的都可以去找产品经理。原型只是项目的基本需求（也就是原型上的需求必须实现）
11月25日到30日 项目排期（设计排期和开发排期）
项目排期
一开始觉得直接开发不就完事了吗？项目排期不是浪费时间吗？？？
项目排期主要包括设计排期和开发排期
设计排期：原型需求内容、完成该需求需要使用到的技术栈、完成该需求设计预期的工时
开发排期：开发的模块、开发的内容、开发该模块和内容预期的工时
现在都是团队一起开发，需要预期项目开发需要多久（也就是最长路径在哪一块或者哪个人），完成开发前期需要做的事（可能和后期实际开发不太一致）
12月01日 项目技术评审
叫上对应的干系人一起讨论。技术可行性评估、技术选型以及与后端一起确认接口定义，在yapi定义好…
12月02日 项目内部细节讨论
前端和后端一起讨论
12月03日 王者账号推广H5 UI评审
蓝湖UI设计稿
一开始我以为UI的工作就是按原型把图片和图标之类画好了给开发人员就完事了，没想到UI介入还挺多的（包括切图、出UI设计稿、UI走查）。当时UI评审的时候看到UI效果图我就是傻眼了，一方面我觉得UI效果图比原型好看多了，一方面我感觉工作量又多了好多。
之前项目排期的时候也是高估了自己，感觉做原型这些几天就能做完了。主要也是不熟悉整个项目流程以及之前的单兵作战到现在的团队前后端合作转变过来不太习惯。
12月04日到12月16日 项目开发
项目的实际开发其实也是包括与后端联调以及自测的。
项目开发之前：
- 熟悉宇石官网代码，第一次看到整个项目结构目录和我之前写过的项目不太一样，我也有些地方看不懂，整个项目结构不能很好的串一起，但是基本上的结构都能看懂
- 自己写了一篇文章将宇石官网代码看不懂的地方和整个结构串起来记录了下来，比如文件是怎样暴露出去的，是在哪里被引入了以及怎样引入的；哪些文件只在哪些环境下才会被载入；以及各种环境的配置等等
- 哪些看不懂就去看哪里，比如各种环境不太理解，VueCLI对模式和环境变量有详细的描述。axios看不懂就去axios中文网有很详细的文档或者去搜其他文章看。比如项目中使用到了axios的二次封装，我就想为什么要二次封装？？？axios不是对ajax封装了一次吗，直接使用就好了。api统一管理，不管接口有多少，所有的接口都可以非常清晰，易于项目后期的维护以及迭代
- 自己先按照宇石官网和项目目录结构搭了一次项目，海哥检查了一下项目目录结构是否规范，不规范的地方改了一下
项目实际开发：
- 70%是布局和样式、30%是逻辑
- 其实对于H5来说，作为项目的主站，样式和用户体验是十分重要的
- H5开发的话使用的是vant UI组件，但是实际开发vant中的UI组件样式基本上都要重写，因为UI需要的样式和UI组件的样式基本上不会一致，能直接用到的样式极少。大多数是需要vant UI组件中的交互功能
- 对于不同的浏览器来说环境都不一样，在安卓上H5项目跑的很正常，但是在ios以及其它内置浏览器上可能会出现各种各样的bug。以及安卓手机上自带的默认浏览器与下载的其它浏览器也有很大的区别
项目实际开发遇到的问题： - UI切图给到我的时候都是png格式的，自认为svg不会失真都用svg不是更好吗？项目中使用小幅面图片或图标图片时使用svg，使用大幅面图片使用png
- H5需要响应式布局，之前我自己一般使用flexible.js+rem来实现响应式布局，感觉还行就直接用了也没有考虑设计稿的宽度以及字体大小，按照自己的想法想给几像素就给几像素。还好就开发了一点点，要不然之后项目全要重写一遍。最后使用了海哥给的postcss-plugin-px2rem+postcss.config.js+setRem.js方案，UI设计稿是750的宽度
- 修改vant UI组件的默认样式：加上了scoped会导致无法修改vant框架组件中本身的样式，scoped又不能去掉，就直接使用deep或>>>做样式穿透来达到修改默认样式的效果，最后使用_resetVant.less来重置vant样式。经验：碰到无法修改的样式时，可以在f12中审查元素，定位到对应的元素，找到对应的class类名或者在Styles中将CSS样式不勾选（看看到底是哪个类名是我们需要修改的样式）
- Vue取消less文件保存自动出现css文件，因为之前安装了Easy LESS插件，需要做配置（这里就不说了）
- 抽离公共组件和公共样式以及定义全局变量等。之前自己做项目虽然也知道抽离公共组件和样式，但是实际上写起来并没有太注意这一块。代码过于冗余，可读性和可维护性很差。抽离之后，写起来也方便，重复的组件和样式就不需要再写，逻辑也很清晰
- 文字样式和图标样式我觉得是整个H5项目中最不好调的样式，根本不是文字撑开了div的高度，而是line-height，line-height导致文字与上下边存在很小的行距，有些需求又要放不下换行又要对齐。文字与文字之间没有对齐的话可以设置行高一样，就能对齐。还有设置vertical-align:middle能使图标垂直方向与文字中线对齐。设置line-height: 1虽然可以清除除了文字外多余的行距（也就是元素本身的字体大小），但是全局设置line-height: 1的话也不好。（设置font-size和line-height一样）。vertical-align的话很有局限性
- 开发规范：Vue规范、git规范、命名规范等等。比如：在单文件组件中没有内容的组件应该是自闭合的。标签的 Props 应该有统一的顺序，依次为指令、属性和事件。CSS使用BEM命名规范block-name__element-name–modifier-name，也就是模块名 + 元素名 + 修饰器名。在feature分支上开发代码再合并到dev分支上，推送。之前推送完之后老是忘了切换分支，导致直接在dev分支上开发，也不想回滚为了图方便，就导致dev才是最新版本，feature还是前几个版本。最后只好把dev分支合并到feature分支。feature分支上开发代码，release分支负责打tag。
- 瀑布流布局之前使用CSS column-count属性（指定某个元素应分为的列数）实现过一次，但是该属性实现瀑布流最大的缺点是序号是从上到下的还有一些局限性。到网上找了几个Vue相关的瀑布流插件，尝试了一番，最后感觉vue-waterfall2还不错
- UI设计稿上有个需求是实现下拉菜单选择完成之后，菜单项标题和图标颜色变成金色。但是vant UI组件的下拉菜单并没有提供对应的参数和API，尝试过样式绑定以及借助UI组件提供的参数和事件还是实现不了，最后只好使用this.$refs触达UI组件内部，手动操作 DOM 元素了。
- 之前是我自己把需求理解错了，我以为图片预览是所有图片，然后就把子组件接收到的父组件传过来的数据中所有图片取到了一个自定义数组中从而实现图片预览。但这里会有一个坑，就是Vue中子组件的created、mounted钩子中获取不到props中的值问题。出现这种情况的原因，是因为父组件中要传递的 props 属性是通过ajax请求回来的，请求的这个过程是需要时间的，但是子组件的渲染要快于ajax请求过程，所以此时created、mounted等只会执行一次的生命周期钩子，已经执行了，但是 props 还没有传进（子组件），所以只能拿到默认值。使用watch监听，由于是监听的对象（或者数组），加上immediate:true 和 deep:true（如果数据发生变化即由空转变时就会触发）。
- 使用van-dialog对话框组件时，v-model="isshow"来控制是否显示对话框，但是isShow是父组件传过来的，当需要关闭对话框时需要通知父组件去改变isShow的值而不是子组件内部直接修改props中的值。（vue单向数据流：父组件可以向子组件通过属性形式传递参数，传递的参数也可以随时随意修改，但子组件不能修改父组件传递过来的参数。！！！只能用父组件传递的数据！！！）(因为子组件接收父组件传递过来的数据，并不是一个基础类型的数据类型，而是类似于object这种引用类型的数据类型。如果修改了引用类型的数据，在使用子组件时，则会造成其他子组件接收数据的错误) (如何解决单向数据流存在问题？子组件接收到父组件的数据，将接收到的数据复制一份放在子组件定义的data里isshow（相当于这个数据的副本）。那么就能让子组件使用自己data里的isshow)。这里还有个点击遮罩层关闭对话框的坑：通过close-on-click-overlay改变的isshow并不会改变父组件的isShow，必须通知父组件去改变isShow。定义一个新的值用来存储父组件传过来的值，避免close-on-click-overlay直接修改子组件props接收的值，监听父组件传过来的isShow是否改变
12月17日到12月27日 与后端联调以及自测
与后端联调这一块出现了很多的问题。后端yapi上的接口没有及时维护，修改了接口名也没有及时通知前端，返回数据格式也没有描述详细。导致这一块联调了几天，返回数据两边格式和参数名不统一。之后后端采用少于等于三个请求参数的拼接在URL地址后面，大于三个请求参数的放在body中，请求数据格式application/json规范，导致前端跟着修改。通过判断传过来的参数是’get’的话请求配置使用data: data，参数是’post’的话请求配置使用params: data
自测Bug
安卓系统上自测大部分页面和功能没有任何问题，但是ios上出现各种问题。
mescroll.js插件对安卓支持挺好的，对于ios来说就是那么的不太友好，但是mescroll.js文档中大部分bug都有解决方案
- 使用QQ推广生成的链接只能在PC端唤起QQ。解决方法：大部分浏览器能唤起QQ
- 返回顶部按钮只在当前页显示。解决方法：toTop: {warpId: xxxx} warpId: 父布局的id; 默认添加在body中
- 开发H5时使用mescroll.js插件，安卓系统没有任何问题，但是ios会出现除了mescroll的div可以滑动，其他的区域均无法滑动，但是页面一刷新又能滑动了。一开始设置 height:100%;
overflow-Y:scroll;
-webkit-overflow-scrolling:touch;没有效果
深入研究-webkit-overflow-scrolling:touch及ios滚动
折腾了半天最后定位到了应该是mescroll插件的问题，然后才想到文档中其实有很多 bug的解决方案。最后到文档中一找就找到了。
解决方案：希望mescroll之外的某个div可以滑动，则给这个div添加mescroll-touch样 式即可。原因：mescroll会禁止window的touchmove事件，从而阻止ios的回弹效果 - 瀑布流导致闪屏问题：每次进入商品详情页就出现闪屏，一开始我以为是网卡，然后并不是网卡，网上查了原因，有的说是v-if与v-show的问题，在页面层次结构，数据较多的时候，用v-if或者v-show就会出现div闪现，或者部分闪烁的结果。可以在根元素添加v-cloak来解决，并且设置它的样式即可。然后我就把v-show去掉了还是闪屏。因为其它页面都没有出现闪屏现象，我猜想只有这个页面出现闪屏，也只有该页面使用了瀑布流，那就应该是瀑布流的问题了。我仔细的发现好像只有图片会闪，其它文字并不会闪屏，最后发现是瀑布流默认给图片设置了过渡动画效果，最后把过渡动画效果设为false就解决了。可能是图片渲染完成的太快，来不及做过渡效果，过渡动画直接从开始到结束从而出现闪屏现象。第二天起来又发现出现很小很小的闪屏，原来是图片加载错误以及加载过慢导致的，然后防止上线之后首屏加载全部图片资源过慢，商品详情页使用了图片懒加载
12月27日 代码review
Code Review的首要目的是改善和保证代码质量，预防 bug
全局参与代码review
比如代码规范，逻辑是否清晰，公共模块是否抽离
12月28日到12月31日 测试、UI走查
最怕测试和UI突然的关心
测试bug - H5公告未按后台配置显示：后台添加公告内容使用的是富文本编辑器，前台的话我只是使用v-html让其以html标签形式展示，但是样式还是不对。这里就需要前台引入与后台对应的富文本编辑器的样式。将static下的quill.snow.css静态文件打包进dist目录下，并在index.html中引入
- 遮罩层无法将底部tabbar盖住：一开始我以为是层级的问题，看了一下van-overlay的层级是比tabbar的层级大的，为什么还是无法盖住？？？最后查阅css层的定位position、absolute、relative层叠加的五条叠加法则中说到子元素的z-index无论多大，父元素大者居上。van-overlay的父级mescroll的层级默认z-index是0，但是tabbar的层级是1，虽然van-overlay的层级是2001但是也无法盖住tabbar。
安卓上能完美实现，但ios还是无法实现遮罩层盖住tabbar。不知道是不是ios对fixed 支持问题还是ios层级问题，ios就很奇葩，其实我觉得还是层级问题。
解决方法：1.将.mescroll的z-index设置的层级大于tabbar即可
2.可以自定义遮罩层用来盖住底部tabbar
UI走查确实挺严格的，但是比我想象中好那么点，一个流光的颜色就改了两天，我感觉颜色改来改去颜色没什么区别，UI总感觉不对…
扫一扫
1114
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
