小安迪
小安迪
  • 发布:2020-02-21 13:52
  • 更新:2023-02-14 20:34
  • 阅读:6344

【uni-app】旧型号的手机页面渲染慢,导致先白屏一会才显示出页面的问题

分类:uni-app

uni-app的项目,主要是vue的页面,在性能比较高的手机上,渲染速度没啥问题,一般页面切换过去,马上就能渲染出页面,但是在一些旧型号的手机上,比如我的一台iPhone6,页面渲染的内容稍微多一点,可能就会先白屏,再渲染出页面了。
这个问题,如果你顶部导航栏和底部Tab页用的是uni-app默认原生的问题不是很大,因为这两块是原生的关系,一般切换页面直接就显示出来了,然后中间的内容再加载,可能在体验上稍微会好点,但是当我用到了自定义的导航栏,那么这个问题就被放大了,因为老手机切换页面时,整个页面都会白一会,没有任何内容,我自己在生命周期中打印过日志:onLoad、onShow都比较快,接下去onReady有时候可以比onShow慢个整整1秒还要多,也就意味着整个页面要白屏1秒以上,这个体验就非常差了。
最后说一下我目前的渲染策略:首先自定义的vue导航栏直接渲染,然后有一个字段在onReady时候会设置为true,页面的其他内容,只有这个字段为true的时候,才会渲染。这样做的目的就是让导航栏尽快的渲染出来,好让页面不要长时间白屏,至少有点东西显示,只能说是一个没有办法的办法吧。。。
在这里也希望uni-app团队也关注一下这方面的性能问题,毕竟现在市面上还有很多用户用着一些性能一般的手机。

另外,我用自定义顶部导航栏和底部导航栏的原因是:uni-app自带的原生导航栏功能太单调了,比如顶部导航栏背景色只能是纯色,一旦设计师给我设计了渐变色,那我就要用自定义vue组件来写导航栏了,虽然最新的有subnvue可以解决,但我内心其实是很懒的,希望更多的功能可以通过配置解决。。。

2 关注 分享
Absorbed66c 徐世强

要回复文章请先登录注册

j***@163.com

j***@163.com

+++++++1
2023-02-14 20:34
l***@genars.net

l***@genars.net

我觉得既然你使用了uniapp,就得接受它的缺点。如果对性能要求这么高,为什么不用原生开发呢?
uniapp的优势就是快速迭代小型业务,而性能不是
2022-10-11 13:53
Absorbed66c

Absorbed66c

期待解决,nvue渲染页面肉眼看得出,体验太差
2020-12-10 01:34
小安迪

小安迪 (作者)

回复 9***@qq.com :
1、自定义一个参数,比如pageReady: false,在onReady方法中,将pageReady设置为true。
2、你的template中需要延时加载的页面内容加个判断,v-if="pageReady==true",这样,判断中的内容就会在onReady方法后再渲染,而你的自定义导航栏就会比较快的渲染出来了
2020-09-24 16:09
9***@qq.com

9***@qq.com

我想问下 导航栏直接渲染 是怎么个写法
2020-09-17 10:41
4***@qq.com

4***@qq.com

回复 DCloud_heavensoft :
oppoA59渲染很慢
2020-09-10 16:48
Yoyo_123

Yoyo_123

期待解决
2020-06-17 06:56
DCloud_heavensoft

DCloud_heavensoft

回复 1***@qq.com :
题主的问题已经解决了,你有问题单独发帖。如果只是因为图片大,那解决不了,app上图片就是不能太大,用原生做也不能太大
2020-06-17 04:33
1***@qq.com

1***@qq.com

尤其是显示的图片大的时候
2020-06-16 16:48
1***@qq.com

1***@qq.com

老手机 是真 的 卡,期待被解决
2020-06-16 16:47