工作中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组件modedate时,可以传入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、预发环境代理失败

Mac上KJJ-Test无法自动代理,需要手动将代理加入host

47.111.36.44    kjj.m.duiba.com.cn
118.31.40.85    mng.duiba.com.cn
118.31.40.85    hd.dlp.duiba.com.cn
118.31.40.85    www.duiba.com.cn
47.111.36.44    activity.m.duiba.com.cn
47.111.36.44    activity-1.m.duiba.com.cn
47.111.36.44    activity-2.m.duiba.com.cn
47.111.36.44    activity-3.m.duiba.com.cn
47.111.36.44    activity-4.m.duiba.com.cn
47.111.36.44    activity-5.m.duiba.com.cn
172.16.80.135    kjj-mng.duibatest.com.cn
172.16.80.135    ali-console.duibatest.com.cn
47.111.36.44    kjj-h5we.duiba.com.cn

19、页面的中转

某页面未加载前调用redirectTo跳转到新页面。Taro.redirectTo({ url }),但是如果页面render使用了 return null则dom会报错

20、new Date()

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

21、Fixed与transform

22、createReplaceTpl

23、store.reset

24、font-weight bold bolder

25、-webkit-text-stroke: aqua;

26、css attr


文章作者: 徐辉波
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 徐辉波 !
评论
 上一篇
Git Commit 规范 Git Commit 规范
git commit的提交性质,类型如下 值 描述 feat 新增一个功能 fix 修复一个Bug docs 文档变更 style 代码格式(不影响功能,例如空格、分号等格式修正) refactor 代码重
2019年10月09日
下一篇 
Python学习(一) Python学习(一)
初识python mac环境搭建 mac默认的python环境是2.x,版本比较旧,去官网下载最新的3.x包安装即可,下载地址:https://www.python.org/downloads/ python -V // 默认的版本
2019年05月27日