开发记录 (Weex) - 经验: 在 Weex 开发中遇到的“大坑小坑”

这是“踩坑”记录，排序不分先后：

在 Weex 中

• 主要布局方式是 Flex，不支持浮动，支持定位。定位中脱离文档流的模式如 absolute，是不参与 Flex 布局的，就是说 Flex 属性无法在添加这种模式的元素上生效。
• 脱离文档流的元素，可以用 left: 0 和 right: 0 来达到 width: 100% 的效果；height: 100% 同理。
• 不支持对象语法绑定 class，需要使用数组语法，例如 :class="[isActive ? 'active' : '' ]"。
• 不支持使用嵌套语法编写样式。
• 不支持 em 、rem 以及百分比等长度单位，只能使用 px。
• 使用 <image> 组件代替 <img> 标签，不支持本地图片，并需要指定宽高属性，否则无法显示。
• 文本标签 <text> 对于“回车”比较敏感，会将其显示为一个空白字符，导致各种样式问题，格式化代码时要注意。

文字溢出截断并显示省略号

常规页面中，单行文字溢出后，截断并显示省略号的方法是，首先为目标元素设置宽度，然后设置以下样式：

/* 溢出隐藏*/
overflow: hidden;
/* 强制不换行 */
white-space: nowrap;
/* 溢出显示省略号 */
text-overflow: ellipsis;

在 Weex 中上面的样式行不通，为目标元素设置宽度后，设置样式为：

/* 溢出显示省略号 */
text-overflow: ellipsis;
/* 设置行数，超出这个值后截断 */
lines: 1;