H5活动页面的开发小结

mishe commented 8 years ago

最近在新公司做的第一个项目竟然是3.8活动，这个太无力了，个人之前很少开发活动类型的页面；

最初的需求（3月3日）

和设计沟通确认，页面采用640_960的规格尺寸。（我一开始拿到手的尺寸竟然是414_736的，太无语了）

于是参考个人的经验；使用 #1 的第一种viewport方式，很快的开发出了相关的页面。

所有答题环节采用JS输出方式

个人感到无比欣慰，所有的问题环节用了JS输出，非常轻松的完成了各种的变更

我一开始以为这个地步了，应该是最终的结果了，但事实是苦逼的才刚刚开始。

苦逼的跟进调整和修改，活动需要当天上线

迎来了本次活动最激动人心的大需求

悲剧的事情发生了，#1 第一种的方式，在webview的环境下，是完全不支持的（2012年就去除了支持），但活动必须要在APP中嵌入，于是只能使用 #1 的第二种方式；

但这种方式存在非常多的适配问题，这个可不是简单能处理的，就算引入淘宝的flex方案那也是远水解不了近火啊（个人并不关注活动类型的适配问题），于是接下来的1个多小时内，只能不停的使用个人的经验，尝试各种方案来试图解决适配问题，但很遗憾，都无法解决

之前的同事和我说，以前的活动使用的是vw/vh和%单位，这个简直就是突来的意外啊，经过沟通，活动页面不考虑安卓4.3及以下版本，因此可以使用vw计量单位，真是万幸啊

推翻之前的css，重写样式，又一次庆幸我之前把所有答题环节做成JS脚本输出的想法了，不然那真是麻烦大了。

经过紧张的1个小时的调整和修改，活动的最终页面终于搞定了，还不能进行最终测试？原因是下午的需求变更，服务端的接口还没有准备好，此时已经11点多了

活动终于在晚上12点上了生产环境，但发现很多的细节问题，静态资源加载存在高发的错误，图形验证码在ios APP中无法显示等等。

直到凌晨1:30，上述的2个问题还是一直存在。

发现静态资源高发的加载错误是由于服务器的缓存bug造成的，刷新服务端缓存后，问题解决了

图形验证码增加了onerror重刷后，也成功解决；但同时又发生无限循环加载验证码的问题（估计服务端图形验证码的输出还是存在问题）

jincdream commented 8 years ago

最紧急到时候直接上@media 可以解决一切问题吧

mishe commented 8 years ago

@media 不是万能的啊，安卓那么多手机型号，屏幕尺寸，不能一个个都用啊

jincdream commented 8 years ago

万能啊，每种屏幕尺寸都能@media啊 ~ ~