程咬金3斧头
程咬金3斧头
  • 发布:2019-06-22 13:50
  • 更新:2022-10-19 16:28
  • 阅读:50423

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. 上次优点盖过性能缺点
3 关注 分享
sonicsunsky 猪八戒 2***@qq.com

要回复文章请先登录注册

Oo0零

Oo0零

我还是倾向于用nvue的,主要几点:1,性能问题。2,本人手机会设置字体,vue开发的页面字体不会变化。3,vue页面的点击事件,手机没声音反馈,nvue的有
2020-08-07 10:37
落魄前端

落魄前端

我感觉nvue 还好啊 ,商城app 主要页面 nvue 的uni-app 模式 , 其他 vue,很好啊
2020-07-10 17:23
男色经典

男色经典

有时候是被逼无奈才使用的nvue,就比如说我,开发的社交类的app,图片非常多,使用vue的话查看的图片多了,切换的时候会很卡,占用内存很高,这时候必须使用nvue,可以回收所有在屏幕以外的图片,这个功能要用vue的话就会非常复杂。
所以我在这些需要展示大量列表和图片的页面用的都是nvue,而一般页面使用的都是vue,结合起来使用,并不是要所有页面都使用nvue的。
2020-06-29 13:43
8***@qq.com

8***@qq.com

我就不懂了,vue这么好用,为什么要推广nvue,本想抱着尝试的心态去用用nvue结果各种坑,按照官方的说法,为了一点的渲染效率去增加自己的工作时间,完全没必要
2020-06-06 15:51
1***@qq.com

1***@qq.com

回复 1***@qq.com :
建议仔细看nvue的文档,发段代码我看看
2020-05-14 18:30
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