weex+vue开发ios端踩坑记录

weex vue ios 原生 app 会不定时更新

  1. img标签应为<image></image>,路径不能引用本地静态文件
  2. Android不支持 overflow:visible,但是ios可以
  3. vue中动态绑定class的语法中如果含有[],weex则不能解析
  4. vue中图片属性 resize='contain' 会居中等比例缩放,浏览器中不会居中,这时要设置图片的
    background-position:center center;
  5. indicator无法更改样式(浏览器中没有样式,打包成app则会呈现出来), indicator 宽高必须设置,否则不会显示
  6. Android不支持overflow:visible,iOS 支持
  7. (1).weex不支持background-image:url();用flex-div包住image和内容,内容的 margin-top 设置为image.height
    (2).(1)中方法有时会出现父子元素margin叠加的状况,这时用另一种方法:image只设置宽高,里面的内容套一div:
    width:750px;display:flex;align-items:center;justify-content:center;position:ablsolute;top:0;left:0;
    (注意不可以将image和内容样式互换,因为position:absolute层级较高,内容会被背景遮住)
  8. 元素:position:fixed定位top或bottom后,仍想让其居中显示,就将其外面套一flex-box:
    width:parentNode.width
  9. flex-box子元素宽度超过父元素,仍会居中显示(两边同时溢出)
  10. 元素越靠后,层级越高

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

  1. 背景样式不支持radio属性(不用它)

  2. weex不支持table属性

  3. position:relative;元素不会有任何变化;position:absolute;如果不设置topleft,则会默认为top:0;left:0;且位置的
    不会被外面的弹性布局影响

  4. animation:transition(this.$refs.***,{styles:{transform:rotate(90deg)}),这个动画会和动画执行的元素的css样式中的
    rotate属性叠加,而且在浏览器中不会叠加,只是会在weex打包后的ios中叠加,从而使两者出现表现不一致的情况

  5. weex对于border:none;的写法是支持的

  6. list列表透明:cell:background-color:transparent浏览器为白色,打包后ios端为透明色(因为list,scroller, slider等组件渲染出网页后,会在自己和子组件之间加上一层div这层div默认的背景色在浏览器端是白色的,导致了两端不一致的表现,如果再控制台上设置其背景色透明,则白色背景消失)

  7. weex: animation:动画在浏览器中是以正常思维,动态的进行的,但是在ios中,假如有一大一小两个div纵向放置在一个flex-box中,
    先缩小div1,再放大div2,这时两端表现:浏览器:div1和div2的位置会随他们的大小进行改变;ios:他们的位置不会动态的随着
    flex布局改变,而是两者的位置是以其各自左上角为参考点进行缩小和放大的。。。

  8. weex不支持css的后代选择器和子代选择器

  9. 垃圾scroller:bug一大堆,有margin重叠问题:解决办法:margin取负值,两端不一致,没办法;横向滚动,浏览器不支持;
    background-color:transparent;浏览器不支持(不是不支持,而是scroller会在内容外面再次套一个innerdiv,他会盖住scroller这个父元素的透明属性)

  10. video标签浏览器不支持

  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:字体上部分会被元素遮挡(原因:个人认为:这是由于字体是方的,而等比例缩放的时候字体宽高都是相对于宽度的比例计算的,行高也是这样的,因此如果高度缩小的比例大于宽度,那么行高就会小于实际的字体的高度,从而遮住了字体)解决办法:字体的行高要设置成大于字体大小的,而且要大于比例缩放的插值

  13. <scroller>s中包含一可变高<text>t,当s的高度大于t时,t在s中默认居中,在s中设置display:flex;justify-content:flex-start;无法改变。
    (原因:scroller会在内容和scroller之间加一个中间的inner div,这个div的高度是和scroller的高度相同的,因此设置scroller的
    flex-box样式根本不会作用到内容中,即t上)
    解决办法:至今没找到(试过用子类选择器,没解决)

  14. weex:设置:class="'img'+(index % 3)":class="'img' + index"浏览器中正常,ios中图片消失不见

  15. weex:animation:子组件a、b是相对于父组件进行绝对定位的,ab都有动画,且动画改变了ab的大小,位置及透明度,这时浏览器端正常,ios端出现两个问题:

1、放大+translate()位置和浏览器不同:ios端translate的参考点为左上,浏览器则会动态的智能的根据动画方向改变参考点
解决办法:将translate的距离=原距离+translate后的元素的宽或高-translate前的元素的宽或高
(有人提供了另一种方法,就是将参考点设置成和浏览器动态设置的参考点相同,但本人测试不管用)
2、如果改变了宽高,这时动画结束后,元素还会自动跳回position:absolute设定的位置
解决办法,absolute、translate不能同时存在

  1. animation:tranformOrigin有效的前提是设置了transform
  2. 背景图片position不设fixed
  3. image 标签支持 border 属性,但是不支持box-shadow
  4. box-shadow不支持负数
  5. textarea:placeholder 会和输入文字重叠
  6. vue 中的 destroyed() 函数在ios中不会被调用(这个原因好像是因为项目页面跳转用的navigator组件,从而导致了这个问题)
  7. weex不支持 inline-block 语法
  8. slider 组件只有一页或两页时左划白屏
  9. weex 中 stream.fetch 方法中, get 方法 body 中数据会加在 param 上(即?后面所携带的参数)传给后台,且 body 中数据为对象格式,而 post 方法中 body 中数据会加在 form 数据中传给后台,且为 JSON 格式,如下图:
    图片1.png

    如果 post 也想加在 URL 的后面当做参数传过去,则应将 JSON 数据放在 param
  10. <div><image></image></div> 这种结构中, image 设置了 resize:"cover" 属性, div 设置了 overflow:hidden 属性,如果此时的 image 宽高比 div 宽高还要大,则 ios 中的 overflow:hidden 属性失效
  11. <image> 标签直接设置 border ,且 resize:cover 图片会溢出到 border 外面
  12. (此条吐槽,请跳过)weex 的官网真的是太敷衍了,自己不支持的 css 属性写法官方例子上还用,你说你自己定的规则自己都懒得去遵守,这。。。真叫人无语


    图片2.png

    客户端经常崩溃,额,原因没来得及找呢

  13. storage.getItem() 要用异步写
  14. animation.transition() 不能在同一函数中操作同一对象两次,如果想要同一对象进行两次动画,要封装成两个函数
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 211,194评论 6 490
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,058评论 2 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 156,780评论 0 346
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,388评论 1 283
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,430评论 5 384
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,764评论 1 290
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,907评论 3 406
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,679评论 0 266
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,122评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,459评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,605评论 1 340
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,270评论 4 329
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,867评论 3 312
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,734评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,961评论 1 265
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,297评论 2 360
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,472评论 2 348

推荐阅读更多精彩内容