weex vue ios 原生 app 會不定時(shí)更新
- img標(biāo)簽應(yīng)為
<image></image>
,路徑不能引用本地靜態(tài)文件 - Android不支持
overflow:visible
破衔,但是ios可以 - vue中動態(tài)綁定class的語法中如果含有[],weex則不能解析
- vue中圖片屬性
resize='contain'
會居中等比例縮放,瀏覽器中不會居中玩徊,這時(shí)要設(shè)置圖片的
background-position:center center; - indicator無法更改樣式(瀏覽器中沒有樣式,打包成app則會呈現(xiàn)出來), indicator 寬高必須設(shè)置谨究,否則不會顯示
- Android不支持
overflow:visible
恩袱,iOS 支持 - (1).weex不支持
background-image:url()
;用flex-div包住image和內(nèi)容,內(nèi)容的margin-top
設(shè)置為image.height
(2).(1)中方法有時(shí)會出現(xiàn)父子元素margin疊加的狀況胶哲,這時(shí)用另一種方法:image只設(shè)置寬高畔塔,里面的內(nèi)容套一div:
width:750px;display:flex;align-items:center;justify-content:center;position:ablsolute;top:0;left:0;
(注意不可以將image和內(nèi)容樣式互換,因?yàn)閜osition:absolute層級較高鸯屿,內(nèi)容會被背景遮住) - 元素:
position:fixed
定位top或bottom后澈吨,仍想讓其居中顯示,就將其外面套一flex-box:
width:parentNode.width - flex-box子元素寬度超過父元素寄摆,仍會居中顯示(兩邊同時(shí)溢出)
- 元素越靠后谅辣,層級越高
fixed > static;
absolute > static;
fixed > absolute;
flex > absolute;
背景樣式不支持radio屬性(不用它)
weex不支持table屬性
position:relative
;元素不會有任何變化;position:absolute
;如果不設(shè)置top
和left
,則會默認(rèn)為top:0;left:0;
且位置的
不會被外面的彈性布局影響animation:transition(this.$refs.***,{styles:{transform:rotate(90deg)})
,這個(gè)動畫會和動畫執(zhí)行的元素的css樣式中的
rotate屬性疊加,而且在瀏覽器中不會疊加冰肴,只是會在weex打包后的ios中疊加屈藐,從而使兩者出現(xiàn)表現(xiàn)不一致的情況weex對于
border:none
;的寫法是支持的list列表透明:cell:background-color:transparent
瀏覽器為白色,打包后ios端為透明色(因?yàn)閘ist熙尉,scroller联逻, slider等組件渲染出網(wǎng)頁后,會在自己和子組件之間加上一層div這層div默認(rèn)的背景色在瀏覽器端是白色的检痰,導(dǎo)致了兩端不一致的表現(xiàn)包归,如果再控制臺上設(shè)置其背景色透明,則白色背景消失)weex:
animation
:動畫在瀏覽器中是以正常思維铅歼,動態(tài)的進(jìn)行的公壤,但是在ios中换可,假如有一大一小兩個(gè)div縱向放置在一個(gè)flex-box中,
先縮小div1厦幅,再放大div2沾鳄,這時(shí)兩端表現(xiàn):瀏覽器:div1和div2的位置會隨他們的大小進(jìn)行改變;ios:他們的位置不會動態(tài)的隨著
flex布局改變确憨,而是兩者的位置是以其各自左上角為參考點(diǎn)進(jìn)行縮小和放大的译荞。。休弃。weex不支持css的后代選擇器和子代選擇器
垃圾scroller:bug一大堆吞歼,有margin重疊問題:解決辦法:margin取負(fù)值,兩端不一致塔猾,沒辦法篙骡;橫向滾動,瀏覽器不支持;
background-color:transparent
;瀏覽器不支持(不是不支持丈甸,而是scroller會在內(nèi)容外面再次套一個(gè)innerdiv糯俗,他會蓋住scroller這個(gè)父元素的透明屬性)video標(biāo)簽瀏覽器不支持
flex-box中(a,b,c)子元素(a)relative,其子元素(aa)absolute老虫,瀏覽器:aa在bc上面叶骨;ios:aa在bc下面
<text>:
height:14px;line-height:14px;font-size:14px;
瀏覽器:字體顯示正常ios:字體上部分會被元素遮擋(原因:個(gè)人認(rèn)為:這是由于字體是方的,而等比例縮放的時(shí)候字體寬高都是相對于寬度的比例計(jì)算的祈匙,行高也是這樣的,因此如果高度縮小的比例大于寬度天揖,那么行高就會小于實(shí)際的字體的高度夺欲,從而遮住了字體)解決辦法:字體的行高要設(shè)置成大于字體大小的,而且要大于比例縮放的插值<scroller>s中包含一可變高<text>t今膊,當(dāng)s的高度大于t時(shí)些阅,t在s中默認(rèn)居中,在s中設(shè)置
display:flex;justify-content:flex-start;
無法改變斑唬。
(原因:scroller會在內(nèi)容和scroller之間加一個(gè)中間的inner div市埋,這個(gè)div的高度是和scroller的高度相同的,因此設(shè)置scroller的
flex-box樣式根本不會作用到內(nèi)容中恕刘,即t上)
解決辦法:至今沒找到(試過用子類選擇器缤谎,沒解決)weex:設(shè)置
:class="'img'+(index % 3)"
或:class="'img' + index"
瀏覽器中正常,ios中圖片消失不見weex:animation:子組件a褐着、b是相對于父組件進(jìn)行絕對定位的坷澡,ab都有動畫,且動畫改變了ab的大小含蓉,位置及透明度频敛,這時(shí)瀏覽器端正常项郊,ios端出現(xiàn)兩個(gè)問題:
1、放大+translate()位置和瀏覽器不同:ios端translate的參考點(diǎn)為左上斟赚,瀏覽器則會動態(tài)的智能的根據(jù)動畫方向改變參考點(diǎn)
解決辦法:將translate的距離=原距離+translate后的元素的寬或高-translate前的元素的寬或高
(有人提供了另一種方法着降,就是將參考點(diǎn)設(shè)置成和瀏覽器動態(tài)設(shè)置的參考點(diǎn)相同,但本人測試不管用)
2拗军、如果改變了寬高鹊碍,這時(shí)動畫結(jié)束后,元素還會自動跳回position:absolute設(shè)定的位置
解決辦法食绿,absolute侈咕、translate不能同時(shí)存在
- animation:tranformOrigin有效的前提是設(shè)置了transform
- 背景圖片position不設(shè)fixed
-
image
標(biāo)簽支持border
屬性,但是不支持box-shadow
-
box-shadow
不支持負(fù)數(shù) -
textarea:placeholder
會和輸入文字重疊 - vue 中的
destroyed()
函數(shù)在ios中不會被調(diào)用(這個(gè)原因好像是因?yàn)轫?xiàng)目頁面跳轉(zhuǎn)用的navigator組件器紧,從而導(dǎo)致了這個(gè)問題) - weex不支持
inline-block
語法 -
slider
組件只有一頁或兩頁時(shí)左劃白屏 - weex 中
stream.fetch
方法中耀销,get
方法body
中數(shù)據(jù)會加在param
上(即?后面所攜帶的參數(shù))傳給后臺铲汪,且body
中數(shù)據(jù)為對象格式熊尉,而post
方法中body
中數(shù)據(jù)會加在 form 數(shù)據(jù)中傳給后臺,且為 JSON 格式掌腰,如下圖:
圖片1.png
如果post
也想加在 URL 的后面當(dāng)做參數(shù)傳過去狰住,則應(yīng)將 JSON 數(shù)據(jù)放在param
中 -
<div><image></image></div>
這種結(jié)構(gòu)中, image 設(shè)置了resize:"cover"
屬性齿梁, div 設(shè)置了overflow:hidden
屬性催植,如果此時(shí)的 image 寬高比 div 寬高還要大,則 ios 中的overflow:hidden
屬性失效 -
<image>
標(biāo)簽直接設(shè)置border
勺择,且resize:cover
圖片會溢出到border
外面 -
(此條吐槽创南,請?zhí)^)weex 的官網(wǎng)真的是太敷衍了,自己不支持的 css 屬性寫法官方例子上還用省核,你說你自己定的規(guī)則自己都懶得去遵守稿辙,這。气忠。邻储。真叫人無語
圖片2.png
客戶端經(jīng)常崩潰,額旧噪,原因沒來得及找呢
-
storage.getItem()
要用異步寫 -
animation.transition()
不能在同一函數(shù)中操作同一對象兩次吨娜,如果想要同一對象進(jìn)行兩次動畫,要封裝成兩個(gè)函數(shù)