就在上周，突然很多用戶反饋，都說(shuō)小小簽到布局亂掉了（線上有四款小程序都收到這樣的反饋，這里我就不廣告了），經(jīng)過(guò)客服反復(fù)溝通，找到了布局亂掉的必現(xiàn)條件：

1、IOS用戶較多，系統(tǒng)版本為8.X，很難升級(jí)(iPhone 5 & 5S)；

2、部分頁(yè)面布局亂掉，這些頁(yè)面都用到了flex布局（反復(fù)排查之后，懷疑跟flex布局有關(guān)系）；

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

4、最近發(fā)布過(guò)新代碼；

先看個(gè)截圖：

巧的是，微信web開(kāi)發(fā)工具也在前不久從0.X版本升級(jí)到了1.X版本，整個(gè)UI改動(dòng)比較大，這里不細(xì)說(shuō)~

出現(xiàn)這么嚴(yán)重的問(wèn)題，那肯定是先回滾代碼，回滾后用戶那邊就顯示正常了，說(shuō)明肯定是代碼的問(wèn)題。

對(duì)比代碼之后，發(fā)現(xiàn)新代碼中主要是添加了一些CSS3的動(dòng)畫(huà)。難道是CSS3某些動(dòng)畫(huà)不支持？索性就把動(dòng)畫(huà)代碼全部去掉，用5S測(cè)試機(jī)運(yùn)行一下，依然亂碼。

然后把flex布局修改成float實(shí)現(xiàn)，發(fā)現(xiàn)布局正常，但是工作量太大，之前的代碼中多列布局，全部用的flex實(shí)現(xiàn)。所以，繼續(xù)查找問(wèn)題~

兩次代碼基本一樣，但提交后效果卻不一樣，為什么？我開(kāi)始懷疑是開(kāi)發(fā)工具的問(wèn)題了，因?yàn)殚_(kāi)發(fā)工具從0.x突然升級(jí)到了1.X，整個(gè)改動(dòng)很大，難道是提交的時(shí)候，代碼壓縮的方式不對(duì)？或者我發(fā)布代碼的姿勢(shì)不對(duì)？

最終發(fā)現(xiàn)了問(wèn)題，確實(shí)是開(kāi)發(fā)工具里面壓縮代碼時(shí)，默認(rèn)勾選項(xiàng)目發(fā)生了變化，默認(rèn)情況下“上傳代碼時(shí)樣式自動(dòng)補(bǔ)全”并未選中，如下：

勾選這個(gè)選項(xiàng)后，再次發(fā)布代碼，布局就正常了。

然后我又去網(wǎng)上查了一下flex布局在ios 8.x上不兼容的處理，大部分回復(fù)都是說(shuō)要添加前綴：

display:-webkit-box;

display:-webkit-flex;

display:-ms-flexbox;

dispiay:flex;

之前用flex布局，是因?yàn)槲谋緦挾葧?huì)根據(jù)內(nèi)容多少而發(fā)生變化，這一點(diǎn)兒讓人特別不爽~

順便再說(shuō)一個(gè)另一個(gè)同學(xué)提的問(wèn)題：為什么獲取手機(jī)號(hào)getPhoneNumber(OBJECT)API調(diào)用報(bào)錯(cuò)？

凡是遇到這種問(wèn)題，首先是看小程序官方文檔，如果還解決不了，就去社區(qū)上查找~

社區(qū)上已經(jīng)有官方人員回復(fù)了，獲取手機(jī)號(hào)功能，不對(duì)個(gè)人開(kāi)發(fā)者開(kāi)放，并且前端沒(méi)辦法直接拿到手機(jī)號(hào)，需要到服務(wù)端去解密。