工作中Taro开发遇坑总结

这里记录工作中遇到的一些坑，以此共勉和提高。希望能够促进自己的成长。

1、单行文本过长省略号，顶部被遮盖

原因是全局添加了line-height为1，这里只需要重置为normal即可

  overflow: hidden;
  display: block;
  width: 100px;
  line-height: normal;
  color: #bd9b84;
  font-size: 24px;
  text-overflow: ellipsis;
  white-space: nowrap;
复制代码

2、多行文本省略号

word-break: break-all;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
box-orient: vertical;
/* 必须保留，autoprefixer 会自动删除过时元素 */
/* autoprefixer: off */
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
复制代码

3、ScrollView组件的scrollIntoView属性无效

tarojs仓库有此问题的issue，Taro官方在新版本1.3.12中解决了次问题，本地版本1.3.9相对落后，只需要更新本地版本即可

taro update project
复制代码

4、taro-echart组件安卓返回丢失

组件内部逻辑处理有问题，只需绑定新的的chartID即可

<Chart
  chartId={randomString()}
  option={contentOption}
  width={Taro.pxTransform(740)}
  height={Taro.pxTransform(300)}
/>
复制代码

5、渐变色由白色到透明在ios兼容性

给一个层设置半透明的背景 background: linear-gradient(to bottom, transparent, #ffffff) 在安卓上显示正常（白色半透明）,但ios上显示透明渐变会出现灰色

background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,1))
复制代码

6、Picker组件绑值问题

Picker组件mode为date时，可以传入fields用来设置显示的列。当只需要显示年月的时候传入month,但此时绑定的value值依然需要传入格式为'YYYY-MM-DD'

<PickerView
  value="2019-08-01"
  mode="date"
  start="2019-04-01"
  end="2019-09-01"
  fields="month"
  onChange={this.onDateChange}>
  <Text>选择日期</Text>
</PickerView>
复制代码

7、css的部分被切掉

margin替换掉padding

padding: 0 18px;
font: normal bold 70px Arial-BoldItalicMT;
line-height:56px;
color:#f3494d;
background:linear-gradient(218deg,#ff3543 0%, #ffa349 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
复制代码

8、swiper组件禁止滑动

在swiper内部显示一元素，定位在上面，然后在其滑动事件内部，阻止事件冒泡和事件捕获。

<View
    onTouchStart={handleSwiperTouch}
    onTouchMove={handleSwiperTouch}
    onTouchEnd={handleSwiperTouch}
/>
复制代码

function handleSwiperTouch (e) {
    e.preventDefault()
    e.stopPropagation()
}
复制代码

9、pointer-events

• auto效果和没有定义pointer-events属性相同，鼠标不会穿透当前层。在SVG中，该值和visiblePainted的效果相同。

• none元素不再是鼠标事件的目标，鼠标不再监听当前层而去监听下面的层中的元素。但是如果它的子元素设置了pointer-events为其它值，比如auto，鼠标还是会监听这个子元素的

10、useEffect死循环

源代码

const { style = {}, children } = props
useEffect(() => {
  // doSomething
}, [style])
复制代码

此处的代码中style给定了{}的初始值，并且未传参，一直没有改变,但是还是陷入了死循环。原因是每次判断的时候 {} === {}为false就会一直触发

11、new Store

公用store单例模式，单用store在mounted里new实例，this.store = new Store

12、

ScrollView需要设置高度后方可触发scroll事件，设置height:100%会发布后失效

height: 100vh;
复制代码

13、Git

git cherry-pick 的使用

14、useContext

全局的Context.Provider只能有一个子标签

15、ref

给自定义组件绑定ref在低版本ios8不兼容，需要绑定到原生的View等组件上

16、Git和调试

• 代码已commit但是忘提交，发后与本地不一致

• 发布后的代码是经过压缩的，没有sourcemap，但是可以将代码格式化Pretty print，搜索关键字打断点调试

17、6p在微信中会刷页面2次

刷新2次会导致蒙层异常，会出现蒙层自动关闭的问题

解决方法： 将蒙层的状态存放在mobx中，默认值为false，只有调用接口的结果为true时才给赋值

18、new Date()

获取某一个时刻的时间戳 new Date('2019-10-07 23:59:59')这样写法不兼容低版本ios，需要要daysj或者date.setHours setMinutes等