前端工作流中，如何更好的与上下游沟通

本文是面向团队内部的小分享，对象是前端上下游中非技术或者非技术出身的合作伙伴（产品/设计/测试）。公司采用的是native + h5的Hybird开发模式。

1. 这个功能能不能实现？

能。如果你在其他同类APP中或者移动端浏览器上看到某个炫酷/贴心/惊艳/好玩/好想抄的功能，别问能不能实现，别人能做到的我们就一定能。大多数依赖现有的技术栈可以实现，但是由于技术栈不同/技术能力的差异/兼容性要求差异，会导致时间成本过高/体验不够好等问题。所以当你看到一个好想抄的功能时，先预估下你能接受的成本，然后你可以这么问：这个功能花三天的时间能不能保证80%的用户可以用？当然，前提是这个问题归前端管。

2. 这个问题归谁管？

由于开发模式的原因，在求证一个技术的可行性或者定位Bug的时候，可能会纠结到底找谁：前端？后端？App？先就常见问题简单粗暴分个类吧：

• 样式/布局/特效/动画/交互：前端，大多数是前端的活/锅，但是如果涉及到顶部nav和底部tab的话，去问问App呗
• 数据调整/数据有错：后端，当然，也可能是前端手抖拿到数据后放错位置了/算错了/写错了，不太相信前端的话先找前端查下接口拿到的数据也无可厚非，前端和产品/测试都是好朋友
• 逻辑错误：不涉及数据的找前端，涉及数据的找完前端找后端也或者先找后端再找前端，看你心情
• 页面挂了：找后端/App/运维，如果是外站的页面就先去找App，虽然可能最后会扔回到前端

3. 遇到棘手Bug怎么办？

重现，重现，重现。先重现，再分析。重现不了？return;

• 如果是内测/外测/灰度发现bug不要急，参考上面第二条，该找谁找谁

• 如果是生产环境：

  • 普遍性bug：不管是影响用户体验类的，还是数据错误类的，也或者逻辑错误类的，只要是普遍性bug，首先都需要考虑代码回退，再分析解决
  • 页面挂了：如果是刚发生产，验收时发现，立马回退需求代码，在外测/灰度尝试重现，然后该找谁找谁，解决后再上；如果需求发了好几天才发现，收拾收拾准备找下家，我们随后就来
  • 个别机型有问题：重现，重现不了给截图+描述，描述中一定要包含机型/系统版本/App版本，然后我们再尝试重现，重现不出来的话只能盲改，盲改基本用处不大

4. 页面能不能优化一下？

我能优化，你能帮我申请到排期吗

• 页面慢

  • 换个100M宽带/5G/4G再看看
  • 如果白屏时间较长，但是从看到进度条到页面出来东西的速度还可以，找APP/后端
  • 如果从进度条到页面出来时间较长或者页面出来到完全展示出来时间较长，重要页面，给前端排期，基本都能优化一些
• 交互反人类/页面丑的没法看：约会，找产品/后端，确认新的交互，出交互稿出图，排期。一年换一版都算比较频繁了
• 体验不是很好：分情况，比如这里手机号码输入能不能3-4-4？能；比如这里的键盘下去后Toast能不能不闪一下，不能；具体直接找前端确认就好

5. 更多细节问题

• 字体：正常情况下，设计图请不要出现特殊字体，都会被替换成默认字体。目前的技术方案不会支持特殊字体（除非直接切成图放上去），不远的将来会支持个人重要页面，个人特殊字体

• 图片：除非必要，常规前端开发过程中比较排斥图片的。当然像一些活动什么的，周期短，又需要气氛的，大张图大张图往页面上贴没问题的。常规静态页面中，可以使用css完成的样式效果就一定不会用图片，比如一些背景图、icon。前端css3支持的样式效果包括不限于

  • 样式：线性渐变、径向渐变、圆角（26个英文字母包含的简单图案均可实现，参见http://www.webhek.com/post/cs...）、透明、阴影、滤镜（灰度/褐色/饱和度/色相旋转/反色/透明度/亮度/模糊/对比度/阴影，参见https://www.w3cschool.cn/cssr...）等
  • 动画：简单的移动（3D）、缩放（3D）、拉伸（3D）、旋转（3D）以及上一条中所有css样式的渐变过程，比如突然宽了，慢慢圆了，不知怎地就绿了，比如小球落地弹起的duangduang的物理过程仿真
  • 其他：canvas/svg/webgl等，可以实现大型网页游戏，虚拟现实等。遗憾的是我就会点简单的canvas和svg
• 兼容性：PC：ie8以上不乱，以下能用即可。 H5：iphone6及以上保证还原度，以下及安卓无明显样式错乱

其他的，想到再说吧