就在(zai)上周，突(tu)然(ran)很多(duo)用戶反(fan)(fan)饋(kui)，都說小小簽到布(bu)局亂(luan)掉了(le)（線上有四款小程序都收(shou)到這(zhe)樣的反(fan)(fan)饋(kui)，這(zhe)里我就不廣(guang)告(gao)了(le)），經過客服反(fan)(fan)復溝通，找到了(le)布(bu)局亂(luan)掉的必現條件：

1、IOS用戶(hu)較多，系統(tong)版(ban)本為8.X，很難升級(iPhone 5 & 5S)；

2、部(bu)分頁(ye)面布局(ju)(ju)亂掉，這些(xie)頁(ye)面都用到了flex布局(ju)(ju)（反復排(pai)查之后，懷疑(yi)跟flex布局(ju)(ju)有關系）；

3、之前使用正常，小程序新發布后(hou)就亂掉(diao)了；

4、最近發(fa)布過新(xin)代碼；

先看個截(jie)圖：

巧的(de)是，微(wei)信web開(kai)發工具也在前不久從0.X版本(ben)升級到了1.X版本(ben)，整個UI改動比較大(da)，這里(li)不細說~

出現這(zhe)么(me)嚴重的問題(ti)，那(nei)肯定是先回(hui)滾代(dai)碼(ma)，回(hui)滾后用戶那(nei)邊就顯示正常了，說明(ming)肯定是代(dai)碼(ma)的問題(ti)。

對比代碼(ma)之后，發現新代碼(ma)中(zhong)主要是添加了(le)一些CSS3的動(dong)(dong)畫(hua)。難道是CSS3某些動(dong)(dong)畫(hua)不支持？索性就把動(dong)(dong)畫(hua)代碼(ma)全(quan)部去掉，用(yong)5S測試機運(yun)行(xing)一下，依然亂(luan)碼(ma)。

然后(hou)把flex布(bu)(bu)局修改成(cheng)float實現(xian)，發現(xian)布(bu)(bu)局正常，但是工作量(liang)太大，之前的(de)代碼中(zhong)多列(lie)布(bu)(bu)局，全部用的(de)flex實現(xian)。所以(yi)，繼(ji)續(xu)查找問(wen)題~

兩次代碼(ma)基本一(yi)樣，但(dan)提交后效(xiao)果卻(que)不(bu)一(yi)樣，為什么？我(wo)開(kai)始懷疑是(shi)開(kai)發工具(ju)的問題了，因為開(kai)發工具(ju)從0.x突然升級到了1.X，整個改動(dong)很(hen)大，難(nan)道是(shi)提交的時候，代碼(ma)壓縮(suo)的方式(shi)不(bu)對(dui)？或者我(wo)發布代碼(ma)的姿勢(shi)不(bu)對(dui)？

最(zui)終發現(xian)了問題，確實是開(kai)發工具里(li)面壓縮代(dai)碼時，默(mo)認勾選項目發生了變化，默(mo)認情況(kuang)下“上傳代(dai)碼時樣式(shi)自動補(bu)全”并(bing)未(wei)選中，如(ru)下：

 勾(gou)選(xuan)(xuan)這個選(xuan)(xuan)項(xiang)后，再次發布代(dai)碼(ma)，布局就正常了。

然后我(wo)又(you)去網(wang)上查了一下flex布局在ios 8.x上不兼容的處理，大部分回復都是說要添(tian)加前綴：

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

dispiay:flex;

之前用flex布局，是因為文本寬度(du)會根據內容多少而發生變化，這(zhe)一(yi)點兒讓人特別不爽(shuang)~

順便(bian)再說(shuo)一(yi)(yi)個另一(yi)(yi)個同學提(ti)的問題：為(wei)什么(me)獲取手機號(hao)getPhoneNumber(OBJECT)API調用(yong)報錯？

凡是遇到這種問題，首先是看小程序官方(fang)文檔，如果還解決(jue)不(bu)了(le)，就(jiu)去社區上查找(zhao)~

社區上(shang)已經有官方(fang)人員(yuan)回復了，獲取手(shou)機號(hao)功能，不(bu)對(dui)個人開發者開放(fang)，并且前(qian)端(duan)沒辦法直接拿(na)到(dao)手(shou)機號(hao)，需要到(dao)服務端(duan)去解密。