记 weex 坑爹过程

• 样式问题

• 1. box-shadow 仅支持 ios
• 2. 只支持 px 写法
• 3. 在 weex 中，flexbox 是唯一的布局模式，不支持内联布局 display: inline/float
• 4. weex 不支持 z-index 设置元素层级关系，但靠后的元素层级更高
• 5. border 不支持缩写，必须分开写
• 6. 背景色必须写完整，background-color: red
• 7. image 必须设置宽高样式
• 8. 动态替换 class，只能使用数组表达式
• 9. 如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于在 Android 端元素 overflow 默认值为 hidden，且 overflow 没有其他值
• 10. 不支持背景图 可是使用定位来解决
• 11. Android 上处理圆角，必须在外层div中设置 border-radius
• 12. 不支持负边距 margin-left: -10px; --> transform: translateX(-10px);
• 13. 伪类选择器只支持active focus disabled enabled
• 14. weex 支持 position 定位 :relative | absolute |fixed |sticky ，默认值是relative
• 15. 支持线性渐变：linea-gradient，不支持径向渐变：radius-gradient
• 16. 子元素的样式不会继承自父元素，比如 color 和 font-size 等样式作用在 <text> 标签的上层 <div> 是无效的
• 17. 文字必须放在 <text> 标签中，不可以直接放在 <div> 标签中
• 18. <text> 标签，有个 lines 样式，用于限制文本行数，并出现省略号，但是 lines:1 必须放在 css 里面，不能放在作为属性放在 <text> 标签中，类似这样 <text lines:"2"></text>，这样不生效
• 19. <input> 标签，必须带结束符，网页端浏览无法聚焦没关系，因为模拟器不支持；必须编辑 <input> 标签的高度，否则聚焦光标会不显示。
• 布局 - 定位层级问题：
• weex 支持 position 定位 :relative | absolute |fixed |sticky ，默认值是 relative ，使用相对定位 absolute 时，在 web 端和 native 端的相对位置会有偏差需要做容错处理，并且如果定位元素超过容器边界，在 Android 下，超出部分将不可见，原因在于 Android 端元素 overflow 默认值为 hidden，且 overflow 没有其他值，不可修改。
• 当使用定位时文档脱离文档流，由于 weex 在 native 端不支持 z-index 设置元素层级关系，而所依靠的是越靠后的元素层级更高，但是在咱们的 app 中越靠后的元素层级更高，并没有生效。
• 据网上传言， v-if 会影响元素的层级，例如：三个 div 都使用了定位，此时的层级关系是只能看到第三个 div，给第二个 div 加上 v-if ，在操作 v-if 时 加上 v-if 的第二个元素会发生有时可见有时不可见的问题，此问题暂时没有复现过。
• weex 官方组件 wxc-overlay / wxc-popup
• wxc-overlay / wxc-popup 的弹出效果默认都是通过 v-if 控制组件从应用边缘显示隐藏，使用绝对定位使其脱离文档流，以及使用 weex.requireModule('animation')，做显示隐藏的过度动画；
• wxc-overlay 蒙层默认可以传入 top left 值，修改距离边距的距离，hasAnimation 字段控制是否有动画状态，默认为 true，duration 控制动画过度时间，timingFunction 字段控制动画执行规则，opacity 字段控制蒙层的透明度，控制点击蒙层是否隐藏
• wxc-popup 弹层首先使用了 wxc-overlay 蒙层，standOut 修改距离边距的距离的默认值，pos 字段控制组件弹出方向，popupColor 控制弹层背景颜色，overlayCfg 字段控制组件动画规则，
• 项目中有 wxf-popup 弹出源码，但是修改 wxf-popup 源码给 wexx wxc-overlay 组件添加 :top="standOut" 控制距离并不生效