项目技术选型

后端：貌似是springboot框架
数据库：mysql
mobile前端：react + weui
pc前端：react + ant-design(V1.x.x)

产品定位

服务于教育行业百万人的一款具有后台cms管理系统，基于微信开发的h5 app。

我的工作

负责Mobile前端的开发。

技术经验

一、要考虑安卓和IOS平台，比如IOS系统页面滑动会卡顿的问题:

//具体细节可以google，baidu
body{
-webkit-overflow-scrolling:touch;//消除IOS卡顿等
}

二、图片显示拉伸和压缩问题:

现在采用的办法：
1、background: `url(${item.mediaImageUrl}) 50% / 100% no-repeat`//效果不是很好

2、采用svg //公司没有引入这种技术，我之前没有深入研究过这种技术，之后要研究研究

三、比如图标问题：

1
2
3

现在我处理的图标都是加载图片，一方面页面加载速度变慢，一方面设计给的图片没有压缩，有时候页面加载完了，图标都没有加载过来。所以很坑。
解决办法：
1、采用css图标，ico图标等//之后深入研究

四、比如tab之间进行切换，进入一个新页面之后返回的时候要返回到当前tab状态

由于第一层页面采用 
style={{ display: this.state.tab == 0 ? null : 'none' }} 这样的代码
来控制tab切换，而不是用路由页面进行切换。所以每次新页面返回之后，都会进入
默认的tab。
一层还容易解决，问题是设计产品的时候，有一个四层深度的页面，返回的时候，还要进入当时的状态。
我的解决办法是利用sessionStorage来存储每次点击的状态，每次重新加载页面的时候会判断session里面是有那个状态，如果有，就模拟操作，恢复成离开时的状态。说起来简单，但是代码量不想。 我想之后在产品设计的时候要和产品说好物理
按键的操作，还有就是自己在页面架构的时候，到底采用哪种方式进行切换。不然后期有很多坑。

五、比如页面无数据的情况，请求数据返回各种乱七八糟的请求的时候：

1
2
3

项目上线测试的时候，服务器突然返回了没有容错过的代码，导致整个页面无法加载。所有枪口指向前端。前端认真查过之后，发现是后端返回了之前从来没有返回
过的报错信息。比如之前data为空的时候，服务器返回 data:[] ,如今返回了 data: null 。那么我之前容错的data.length == 0 的代码当然会报错了，因为null肯定没有length这个属性哇。所以以后前端要主动去向后端索要后端各种情况
的返回数据样式。

六、比如其它

1 2	字数太多怎么处理，列表太多进行滑动怎么处理，背景模糊遮罩处理怎么处理。总的来说，自己的css现在是短板。

工作经验

1、后端可能不会和你沟通，直接写接口。写完接口直接将所有数据，裸奔给你。
2、后端可能不会帮你处理记录状态，当然换页面的时候返回给你。这时候需要自己在本地记录状态，进入新页面的时候取出状态和数据。
3、后端可能会只给你一堆数据，然后让前端来处理各种数据。比如一次性把所有列表数据，然后让我做了一个每次下拉加载15条的效果。这个处理需要使用js深复制，将数据拷贝俩份，一份存储所有的数据，一份存储已经加载的数据。而且由于每次切换tab要从后端拉取新数据，每次拉取的时候都需要清空那俩份数据。
4、设计师可能只会关注外在的美观，不会考虑按键是否合理。可能只会设计一些大体上的页面，不会帮你设计没有数据，没有网络等其它情况的页面。还可能只标注一些他认为的关键标注。设计师可能只会考虑iPhone6的屏幕，不会考虑小屏或者超大屏手机的页面。这些事情，都得你来处理，你开发之前就想到。
5、当然测试会帮你处理这些问题，会帮你测试各种极端情况，即使那种极端情况，有时候不会发生。测试也不会理会设计是否合理，不会理会后端接口是否合理。只会把大部分问题扔给前端。所以你需要做好独自处理这些问题。包容各种不合理的要求。

后记

目前本产品是第一个版本，已经正式上线。不知道第二个版本会什么时候开始。第二版应该会优化很多问题。希望在开始第二个版本之前，自己能够掌握需要优化的技术栈：比如svg、比如各种css牛逼的特效、比如利用自己的组件，或者redux来记录各种状态等。