小程序模板網(wǎng)

小程序中布局突然亂掉了,到底是怎么個(gè)情況?

發(fā)布時(shí)間:2018-04-25 09:58 所屬欄目:小程序開(kāi)發(fā)教程

				

就在上周,突然很多用戶反饋,都說(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ù)端去解密。



易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24000.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢