小程序中布局突然乱掉了，到底是怎么个情况？

就在上周，突然很多用户反馈，都说小小签到布局乱掉了（线上有四款小程序都收到这样的反馈，这里我就不广告了），经过客服反复沟通，找到了布局乱掉的必现条件：

1、IOS用户较多，系统版本为8.X，很难升级(iPhone 5 & 5S)；

2、部分页面布局乱掉，这些页面都用到了flex布局（反复排查之后，怀疑跟flex布局有关系）；

3、之前使用正常，小程序新发布后就乱掉了；

4、最近发布过新代码；

先看个截图：

巧的是，微信web开发工具也在前不久从0.X版本升级到了1.X版本，整个UI改动比较大，这里不细说~

出现这么严重的问题，那肯定是先回滚代码，回滚后用户那边就显示正常了，说明肯定是代码的问题。

对比代码之后，发现新代码中主要是添加了一些CSS3的动画。难道是CSS3某些动画不支持？索性就把动画代码全部去掉，用5S测试机运行一下，依然乱码。

然后把flex布局修改成float实现，发现布局正常，但是工作量太大，之前的代码中多列布局，全部用的flex实现。所以，继续查找问题~

两次代码基本一样，但提交后效果却不一样，为什么？我开始怀疑是开发工具的问题了，因为开发工具从0.x突然升级到了1.X，整个改动很大，难道是提交的时候，代码压缩的方式不对？或者我发布代码的姿势不对？

最终发现了问题，确实是开发工具里面压缩代码时，默认勾选项目发生了变化，默认情况下“上传代码时样式自动补全”并未选中，如下：

勾选这个选项后，再次发布代码，布局就正常了。

然后我又去网上查了一下flex布局在ios 8.x上不兼容的处理，大部分回复都是说要添加前缀：

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

dispiay:flex;

之前用flex布局，是因为文本宽度会根据内容多少而发生变化，这一点儿让人特别不爽~

顺便再说一个另一个同学提的问题：为什么获取手机号getPhoneNumber(OBJECT)API调用报错？

凡是遇到这种问题，首先是看小程序官方文档，如果还解决不了，就去社区上查找~

社区上已经有官方人员回复了，获取手机号功能，不对个人开发者开放，并且前端没办法直接拿到手机号，需要到服务端去解密。

欢迎关注我：知晓程序员