weex+vue開發(fā)ios端踩坑記錄

weex vue ios 原生 app 會不定時(shí)更新

  1. img標(biāo)簽應(yīng)為<image></image>,路徑不能引用本地靜態(tài)文件
  2. Android不支持 overflow:visible破衔,但是ios可以
  3. vue中動態(tài)綁定class的語法中如果含有[],weex則不能解析
  4. vue中圖片屬性 resize='contain' 會居中等比例縮放,瀏覽器中不會居中玩徊,這時(shí)要設(shè)置圖片的
    background-position:center center;
  5. indicator無法更改樣式(瀏覽器中沒有樣式,打包成app則會呈現(xiàn)出來), indicator 寬高必須設(shè)置谨究,否則不會顯示
  6. Android不支持overflow:visible恩袱,iOS 支持
  7. (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)容會被背景遮住)
  8. 元素:position:fixed定位top或bottom后澈吨,仍想讓其居中顯示,就將其外面套一flex-box:
    width:parentNode.width
  9. flex-box子元素寬度超過父元素寄摆,仍會居中顯示(兩邊同時(shí)溢出)
  10. 元素越靠后谅辣,層級越高

fixed > static;
absolute > static;
fixed > absolute;
flex > absolute;

  1. 背景樣式不支持radio屬性(不用它)

  2. weex不支持table屬性

  3. position:relative;元素不會有任何變化;position:absolute;如果不設(shè)置topleft,則會默認(rèn)為top:0;left:0;且位置的
    不會被外面的彈性布局影響

  4. animation:transition(this.$refs.***,{styles:{transform:rotate(90deg)}),這個(gè)動畫會和動畫執(zhí)行的元素的css樣式中的
    rotate屬性疊加,而且在瀏覽器中不會疊加冰肴,只是會在weex打包后的ios中疊加屈藐,從而使兩者出現(xiàn)表現(xiàn)不一致的情況

  5. weex對于border:none;的寫法是支持的

  6. list列表透明:cell:background-color:transparent瀏覽器為白色,打包后ios端為透明色(因?yàn)閘ist熙尉,scroller联逻, slider等組件渲染出網(wǎng)頁后,會在自己和子組件之間加上一層div這層div默認(rèn)的背景色在瀏覽器端是白色的检痰,導(dǎo)致了兩端不一致的表現(xiàn)包归,如果再控制臺上設(shè)置其背景色透明,則白色背景消失)

  7. 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)行縮小和放大的译荞。。休弃。

  8. weex不支持css的后代選擇器和子代選擇器

  9. 垃圾scroller:bug一大堆吞歼,有margin重疊問題:解決辦法:margin取負(fù)值,兩端不一致塔猾,沒辦法篙骡;橫向滾動,瀏覽器不支持;
    background-color:transparent;瀏覽器不支持(不是不支持丈甸,而是scroller會在內(nèi)容外面再次套一個(gè)innerdiv糯俗,他會蓋住scroller這個(gè)父元素的透明屬性)

  10. video標(biāo)簽瀏覽器不支持

  11. flex-box中(a,b,c)子元素(a)relative,其子元素(aa)absolute老虫,瀏覽器:aa在bc上面叶骨;ios:aa在bc下面

  12. <text>:height:14px;line-height:14px;font-size:14px;
    瀏覽器:字體顯示正常ios:字體上部分會被元素遮擋(原因:個(gè)人認(rèn)為:這是由于字體是方的,而等比例縮放的時(shí)候字體寬高都是相對于寬度的比例計(jì)算的祈匙,行高也是這樣的,因此如果高度縮小的比例大于寬度天揖,那么行高就會小于實(shí)際的字體的高度夺欲,從而遮住了字體)解決辦法:字體的行高要設(shè)置成大于字體大小的,而且要大于比例縮放的插值

  13. <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上)
    解決辦法:至今沒找到(試過用子類選擇器缤谎,沒解決)

  14. weex:設(shè)置:class="'img'+(index % 3)":class="'img' + index"瀏覽器中正常,ios中圖片消失不見

  15. 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í)存在

  1. animation:tranformOrigin有效的前提是設(shè)置了transform
  2. 背景圖片position不設(shè)fixed
  3. image 標(biāo)簽支持 border 屬性,但是不支持box-shadow
  4. box-shadow不支持負(fù)數(shù)
  5. textarea:placeholder 會和輸入文字重疊
  6. vue 中的 destroyed() 函數(shù)在ios中不會被調(diào)用(這個(gè)原因好像是因?yàn)轫?xiàng)目頁面跳轉(zhuǎn)用的navigator組件器紧,從而導(dǎo)致了這個(gè)問題)
  7. weex不支持 inline-block 語法
  8. slider 組件只有一頁或兩頁時(shí)左劃白屏
  9. 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
  10. <div><image></image></div> 這種結(jié)構(gòu)中, image 設(shè)置了 resize:"cover" 屬性齿梁, div 設(shè)置了 overflow:hidden 屬性催植,如果此時(shí)的 image 寬高比 div 寬高還要大,則 ios 中的 overflow:hidden 屬性失效
  11. <image> 標(biāo)簽直接設(shè)置 border 勺择,且 resize:cover 圖片會溢出到 border 外面
  12. (此條吐槽创南,請?zhí)^)weex 的官網(wǎng)真的是太敷衍了,自己不支持的 css 屬性寫法官方例子上還用省核,你說你自己定的規(guī)則自己都懶得去遵守稿辙,這。气忠。邻储。真叫人無語


    圖片2.png

    客戶端經(jīng)常崩潰,額旧噪,原因沒來得及找呢

  13. storage.getItem() 要用異步寫
  14. animation.transition() 不能在同一函數(shù)中操作同一對象兩次吨娜,如果想要同一對象進(jìn)行兩次動畫,要封裝成兩個(gè)函數(shù)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末舌菜,一起剝皮案震驚了整個(gè)濱河市萌壳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖袱瓮,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件缤骨,死亡現(xiàn)場離奇詭異,居然都是意外死亡尺借,警方通過查閱死者的電腦和手機(jī)绊起,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來燎斩,“玉大人虱歪,你說我怎么就攤上這事≌け恚” “怎么了笋鄙?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長怪瓶。 經(jīng)常有香客問我萧落,道長,這世上最難降的妖魔是什么洗贰? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任找岖,我火速辦了婚禮,結(jié)果婚禮上敛滋,老公的妹妹穿的比我還像新娘许布。我一直安慰自己,他們只是感情好绎晃,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布蜜唾。 她就那樣靜靜地躺著,像睡著了一般箕昭。 火紅的嫁衣襯著肌膚如雪灵妨。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天落竹,我揣著相機(jī)與錄音,去河邊找鬼货抄。 笑死述召,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蟹地。 我是一名探鬼主播积暖,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼怪与!你這毒婦竟也來了夺刑?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎遍愿,沒想到半個(gè)月后存淫,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡沼填,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年桅咆,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片坞笙。...
    茶點(diǎn)故事閱讀 40,090評論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡岩饼,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出薛夜,到底是詐尸還是另有隱情籍茧,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布梯澜,位于F島的核電站寞冯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏腊徙。R本人自食惡果不足惜简十,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望撬腾。 院中可真熱鬧螟蝙,春花似錦、人聲如沸民傻。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽漓踢。三九已至牵署,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間喧半,已是汗流浹背奴迅。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留挺据,地道東北人取具。 一個(gè)月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓,卻偏偏與公主長得像扁耐,于是被迫代替她去往敵國和親暇检。 傳聞我的和親對象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,033評論 2 355

推薦閱讀更多精彩內(nèi)容