weex+vue开发ios端踩坑记录

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

1. img标签应为,路径不能引用本地静态文件
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;

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

12. weex不支持table属性

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

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

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

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

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

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

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

20. video标签浏览器不支持

21. flex-box中(a,b,c)子元素（a）relative，其子元素(aa)absolute，浏览器:aa在bc上面；ios：aa在bc下面

22. :height:14px;line-height:14px;font-size:14px;
    浏览器：字体显示正常ios:字体上部分会被元素遮挡（原因：个人认为：这是由于字体是方的，而等比例缩放的时候字体宽高都是相对于宽度的比例计算的，行高也是这样的，因此如果高度缩小的比例大于宽度，那么行高就会小于实际的字体的高度，从而遮住了字体）解决办法：字体的行高要设置成大于字体大小的，而且要大于比例缩放的插值

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

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

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

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

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

    图片1.png
    
    如果 post 也想加在 URL 的后面当做参数传过去，则应将 JSON 数据放在 param 中
35. 这种结构中， image 设置了 resize:"cover" 属性， div 设置了 overflow:hidden 属性，如果此时的 image 宽高比 div 宽高还要大，则 ios 中的 overflow:hidden 属性失效
36. 标签直接设置 border ，且 resize:cover 图片会溢出到 border 外面

37. （此条吐槽，请跳过）weex 的官网真的是太敷衍了，自己不支持的 css 属性写法官方例子上还用，你说你自己定的规则自己都懒得去遵守，这。。。真叫人无语

    
    
    

    图片2.png
    
    

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

38. storage.getItem() 要用异步写
39. animation.transition() 不能在同一函数中操作同一对象两次，如果想要同一对象进行两次动画，要封装成两个函数