weex czzlm 项目开发总结--重构

WEEX重构存在问题与解决方案

1、不能支持横屏
2、native不支持less内嵌(.header . hd_back{})、@import写法
3、native 不支持样式属性简写:比如不支持padding: 10px 5px 0px 0px; 必须写成

padding-top: 10px; padding-right: 5px; 才能生效

4、不要使用 background 简写.
5、<image> 设置padding和 width 生成效果H5、android不一致,需要把padding修改成margin
6、ios 不支持line-height,得统一使用padding-top
7、native 不支持before、after等伪元素
8、native div默认是inline 需要用display: flex;
9、H5 使用了flex: 1; 高度(1px)不会auto。得设置display: block;
10、native在设置position: absolute; 不支持width百分比, 统一用750px就是100%
11、native 设置display: flex; height,导致padding、margin不生效。得去掉height。
12、底部对齐两个不同元素的文字,必须给两个文字设置高度

《weex czzlm 项目开发总结--重构》

《weex czzlm 项目开发总结--重构》

13、native a组件不能直接嵌入文体,样式没有color, font-size等等必须嵌入文本得使用内嵌入text组件方式
13、native ios 环境下<list>组件没有auto 高度,默认高度为0px,导致显示不了<cell>组件内容。
14、native 不支持一下css选择器,比如::last-child、:nth-child(n)等等
15、text 组件的父父级设置了display: flex; text 组件的父级必须得设置flex,不然text 组件换行无效。

《weex czzlm 项目开发总结--重构》

16、设置display: flex,height。导致padding计算到height上。比如:

display: flex; height: 200px; padding-top: 20px;
展示的结果是 整个元素高度还是200px ,内部内容向下移动20px

17、native <text> 不支持oblique倾斜, 支持italic斜体。font-style: italic;
18、使用<scroller>组件时,其组件内元素默认背景白色,如果需要在<scroller>内部设置新颜色,得在<scroller>组件内嵌入div组件
20、焦点图组件兼容问题:如果设置style 的scoped属性,会导致H5设置indicator组件样式不生效。解决方案:在焦点图的组件上去掉scoped属性,设置indicator
21、使用<scroller>组件设置水平方向滑动时,在ios native <scroller>组件的高度不支持auto,必须得统一给<scroller>组件设置固定高度。
22、android native不支持负值margin-top: -50px;并且H5跟ios native解析margin-top: -50px; 结果不一致, 使用position, top 解决
23、如果定位元素超过容器边界,在 Android native下,超出部分将不可见,原因在于 Android 端元素 overflow 默认值为 hidden,但目前 Android 暂不支持设置 overflow: visible。
24、列表: 在 Android native下设置border-top 1px被下个节点覆盖,解决方式 margin-top: 1px;

    原文作者:chenwenxian
    原文地址: https://segmentfault.com/a/1190000009139238
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞