weex-ui组件库开发维护中踩过的那些坑

Weex 致力于使开发者能基于通用跨平台的 Web 开发语言和开发经验，来构建 Android、iOS 和 Web 应用。简单来说，在集成了
WeexSDK 之后，你可以使用 JavaScript 语言和前端开发经验来开发移动应用。 ------weex 官网

众所周知，跨平台开发和一些混合开发都有着诸多的坑，所谓鱼和熊掌不可兼得，weex有着其跨平台开发的优势，但是良莠不齐的移动设备和对特性支持的不统一性又导致在开发过程中遇到很多的问题，开发者得一个一个去解决，这里收集几个我遇到得问题。

我维护的是一套weex平台的智能家居生态的组件，cell组件的下border我设置为1px，如下：

.cell-bottom-border {
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: #f2f2f2;
}

开发者使用是直接给绑定的属性赋值，hasBottomBorder是cell的bottomborder，hasSubBottomBorder是文本的border，组件库中的cell组件均是采用props接收属性，在dom中更具props的值判断是否昂顶某个样式类即可。

<cell title="bordertest 测试文本测试文本测试文本测试文本"
      :hasArrow="true"
      :hasMargin="false"
      :hasTopBorder="false"
      :hasBottomBorder="true"
      :hasSubBottomBorder="false"
      style="padding-left:32px"
      @CellClick="itemClicked">
</cell>

问题来了，Android是好的，ios是有的有border，有的cell没有border，开发那边反馈说有的有，有的没有，但是在pc的浏览器上看是正常的，也不像是ios1px问题，如果是那应该更明显才是， 就是一个简单的基础border我也想不出什么好办法，我放大仔细看了一下其实都有 只不过很细看不清楚，我自己写了一个列表后发现第偶数项列表都没有bottomborder，于是我针对ios重新写了个类，将 border-bottom-width改为了2px，然后获取运行设备类型，根据设备类型渲染不同的类，还真成了。
ps：weex相关开发在pc上测毛用没有，还得真机行。

2：cell组件单行显示title，超出后… 最终是实现的效果如下：

刚提过来时，我想这个简单，直接：

width：xxx;
text-overflow:ellipsis;
white-space：nowrap；
overflow：hidden；

pc端打开模拟了一下是好的，直接提交发包， 然后又提来了无效，我折腾了一上午，pc端是好的，移动端就是不行，要么直接换行了，要么直接一行超出去了，后来查资料以为是flex和text-overflow共存的问题，也试了，各种布局都试了，就是不行，正当放弃或者使用hack技术（裁剪拼接‘…’）时，隔壁老梁在开发用到这个问我“cell不支持单行超出显示…吗? 我加了lines都不行”，然后我也用lines试了一下，ide直接报红， “unknow Property”, 准备删了，算了还是测一下，打开手机扫了一下，卧槽，成了。。。

display: flex;
lines: 1;
text-align: justify;
width: xxxpx;
overflow: hidden; 
text-overflow:ellipsis;

上面那张图就是最终效果。

<未完待续，长期更新>