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

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

要回复文章请先登录注册

小娱

小娱

回复 1***@qq.com :
nvue不支持背景图
2022-10-19 16:28
火山喷出爆米花

火山喷出爆米花

回复 YyJj123123 :
一样,可以留个联系方式交流一下吗?
2022-08-18 15:48
5***@qq.com

5***@qq.com

nvue movable-area 设置背景图片不显示
2022-08-03 16:26
2***@qq.com

2***@qq.com

回复 YyJj123123 :
uni.request()不行?
2022-02-16 11:20
YyJj123123

YyJj123123

大哥,nvue界面该如何发起请求啊?我之前搞小程序的,现在要转成app,地图只能用nvue做(自己查询以及询问了uni官方的开发)。最后发现不能使用我封装的api.....大哥们咋做的?
2022-01-12 18:12
1***@qq.com

1***@qq.com

这个全屏弹窗是咋做的呢
2021-07-26 12:01
2***@qq.com

2***@qq.com

回复 j***@foxmail.com :
去看weex 文档 在官方文档上方的 菜单栏 其他规范 最下面
2021-02-05 22:07
j***@foxmail.com

j***@foxmail.com

回复 DCloud_UNI_Anne :
谢谢
2020-11-28 20:49
DCloud_UNI_Anne

DCloud_UNI_Anne

回复 j***@foxmail.com :
https://uniapp.dcloud.net.cn/use-weex
2020-11-23 10:49
j***@foxmail.com

j***@foxmail.com

回复 1***@qq.com :
老哥,问一下,这个nvue的文档在哪儿看的啊?
2020-11-22 21:29