程咬金3斧头
程咬金3斧头
  • 发布:2019-06-22 13:50
  • 更新:2021-07-26 12:01
  • 阅读:37637

uni-app大法好 ,nvue 从入坑到放弃

分类:nvue

背景

APP上有一个顶部选项卡,切换列表的页面,该页面十分复杂
实际页面,可以看在线地址 https://beta.hongdan888.com/pages/competition/index

1 每个选项卡的列表数据能有400条
2 每个选项卡有两个弹窗筛选条件,多选或者多选
3 定时器,每10秒更新部分数据
4 实测在IOS上体验还可以,但是Android APP上比较卡顿。
5 本人对weex有一点了解,曾经想用他作为APP开发栈,但是感觉社区太冷清,运行起来各种问题,最终没敢用。
因此,考虑使用下nvue替换试试看。

目的

本文想告诉各位童鞋,不要轻易使用nvue,特别是复杂页面。虽然官方推荐复杂页面使用nvue性能更好,但是坑更不是一般的多。如果想尝试,先拿简单页面开刀!
笔者最终还是放弃了nvue,使用了uni-app

用到的组件

1 hello-uniapp中提供的 tab-nvue组件
2 自己开发的icon 、日历 、单选复选筛选组件
5 weex ui中的mask 、overlay组件

坑在哪里

tab-nvue组件坑。

1 tab-content中只能是list 作为根组件,也就是说tab-content中只能有list refresh header loading cell这几个组件 ,而我们页面上面有一个日历或者轮次筛选,本人尝试了放在header中或者fix定位,最终没有成功。
2 灵机一动,在list的tab-content上再新增一个tab-content放筛选组件,这次成功了,但是问题来了,两个tab-content各占了半屏。原因是tab-content组件默认设置了flex:1的样式。
3 最终tab-content算是搞定了,虽然切换起来,上下两个tab-content不太一致,但也还能接受。毕竟看起来流畅了很多。

icon坑

自己写的icon例子,在weex在线编辑器测试正常,但是一旦作为组件,就无法显示。 经历各种查文档后,算是搞定。可能单页运行和组件运行机制不一样。

mask弹窗的坑

1 弹窗内的数据发生更新时,在IOS上正常,但在Android上严重抖动。
2 原因,弹出默认位置 和传入的prop中的位置参数不一致。但是为什么数据变化,样式也重新渲染,这就搞不懂了。
3 这直接导致一个问题,组件没办法复用,除非弹出的位置大小都一致。

动画的坑

1 列表上有个比赛进行中的,时间闪烁效果,使用css transform,分分钟搞定
2 weex,css只支持大小位置的变化,只能使用animation 模块来实现。
3 但是animation 的动画只能运行一次,要一直闪现怎么破,想到使用定时器。
4 已经想骂娘了,想放弃了,一个简单的动画,还要搞个定时器每过几秒执行一次。
5 想过使用gif做图 ,但还是想再尝试看看

生命周期的坑

1 列表中有两个两个定时器,一个定时动画,一个定时获取数据。但是页面离开时,要销毁定时器,页面显示要再创建定时器。
2 weex官方提供了一个全局事件,说是可以监听APP前台、后台事件;一个通用事件(appear ,Disappear),监听页面可见不可见事件
3 本人实测,IOS上全局事件有效,Android无效; 通用事件无效。这时已经无解了。

点击事件的坑

  1. 连续点击,会触发多次,比如连点列次列表到详情,就会打开两次页面。
  2. 点击过快,不触发,在Android上点击总是时灵时不灵

全局变量的坑

  1. 据说weex不支持vuex,本人已经不想实测了
  2. 由于APP中有金币活动,可能会在任何一个页面弹出提示,weex如果不支持vuex,那这个功能又要想办法解决。

uni-app大法好

  1. 页面渲染不会抖动
  2. 组件开发简单
  3. css兼容性好
  4. 各类事件很全面
  5. 社区活跃
  6. 上次优点盖过性能缺点
2 关注 分享
sonicsunsky 猪八戒

要回复文章请先登录注册

1***@qq.com

1***@qq.com

回复 1***@qq.com :
为什么我的不行,最新版
2020-05-14 16:38
1***@qq.com

1***@qq.com

回复 1***@qq.com :
transition + transform 是可以使用的,animation可以用weex的animation, 更复杂的动画使用bindingx,完全好使的。
2020-05-13 17:05
1***@qq.com

1***@qq.com

回复 1***@qq.com :
nvue 无法使用 css 中的动画 (transition + transform & animation)
2020-05-13 11:53
风云杭州

风云杭州

发现nvue确实坑,好几个地方,改为vue就一点问题都没有了
2020-05-05 17:05
程咬金3斧头

程咬金3斧头 (作者)

回复 z***@gmail.com :
老铁,私信详聊
2020-04-29 11:44
z***@gmail.com

z***@gmail.com

楼主你好,请问你这个有上架app嘛
2020-04-27 14:54
1***@qq.com

1***@qq.com

Nvue的缺点固然多,只是大部分的使用方式与我们平时的Vue不太一致,建议部分使用Nvue,但是涉及到更多更复杂的页面,vue卡到不能接受,Nvue还是可以处理的,我现在心里骂着Nvue还是在用Nvue,习惯就好,坑踩过就行
2020-02-25 15:42
1***@163.com

1***@163.com

nvue确实坑,已经打算放弃了
2019-12-06 17:12
DCloud_heavensoft

DCloud_heavensoft

还是把nvue的模式改为uni-app吧,然后用uni的内置组件和uni ui,别用weex ui了。坑比weex少多了
2019-12-05 03:08
1***@qq.com

1***@qq.com

回复 9***@qq.com :
目前楼主遇到的坑我踩到了两个,点击防抖节流,结果函数无用,测试了半天,发现在vue页面一点问题都没有
2019-12-04 14:20