为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

(日落西山,每次看到此景,我总是会想到明朝(明朝那些事儿第六部的标题,日落西山))

 前言

几个月前,因工作需求,我开发了一个小程序,当时遇到了一个需求,是关于tabbar权限的问题。小程序的用户分两种,普通用户和vip用户,普通用户tabbar有两个,vip用户小程序下面的tabbar有五个。  
因为涉及自定义tabbar的问题,所以官方自带的tabbar肯定就不能用了,我们需要自定义tabbar。官方也提供了自定义tabbar的功能。

官网自定义tabbar

官网地址:基础能力 / 自定义 tabBar (qq.com)

{
  "tabBar": {
    "custom": true,
    "list": []
  }
}

就是需要在 app.json 中的 tabBar 项指定 custom 字段,需要注意的是 list 字段也需要存在。

然后,在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

具体代码,大家可以参考官网案例。

需要注意的是每个tabbar页面 / 组件都需要在onshow / show 函数中执行以下函数,否则就会出现tabbar按钮切换两次,才会变成选中色的问题。

      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 0     // 第n个tabbar页面就填 n-1
        })
      }

接下来就是我的思路

为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

我在 custom-tab-bar/index.js 中定义了一个函数,这个函数去判断当前登录人是否为vip,如果是就替换掉tabbar 的数据。

那么之前每个页面的代码就要写成这样

      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().change_tabbar_list()
        this.getTabBar().setData({
          selected: 0   // 第n个tabbar页面就填 n-1
        })
      }

ok,我们来看一下效果。注意看视频下方的tabbar,每个页面,第一次点击的时候,有明显的闪烁bug。(大家也可以参考一下市面上的小程序,小部分的小程序有这个闪烁问题,大部分的小程序没有这个闪烁的问题(如:携程小程序))

为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

bug产生原因

那么我们就要去思考了,为什么人家的小程序没有这个bug呢?

想这个问题前,要先去想这个bug是怎么产生的,我猜测是每个tabbar页面都有个初始化的过程,第一次渲染页面的时候要去重新渲染tabbar,每个页面的tabbar都是从0开始渲染,然后会缓存到每个页面上,所以第二次点击就没有这个bug了。

解决tabbar闪烁问题

为了解决这个问题,我想到了SPA ,也就是只留一个页面,其他的tabbar页面都弄成组件。

效果展示

为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

已经解决,tabbar闪烁的问题。

代码思路,通过wx:if 控制组件的显示隐藏。

为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

为了解决小程序tabbar闪烁的问题,我将小程序重构成了 SPA

源码地址:gitlab.com/wechat-mini…
https克隆地址:gitlab.com/wechat-mini…

写在最后

1、我也是在网上见过别人的一些评论,说如果将小程序重构成这种单页面,会有卡顿问题,我目前没有发现这个问题,可能是我做的小程序功能比较少。

2、至于生命周期,将页面切换成组件后,页面的那些生命周期也肯定都不能使用了,只能用组件的生命周期,我之前开发使用组件的生命周期实现业务逻辑也没什么问题。 触底加载这些也只能换成组件去实现了。

3、小程序最上面的标题,也可以使用以下代码来实现。就是在每个组件初始化的时候要去执行下列代码。

            wx.setNavigationBarTitle({
                title: '',
              });

原文链接:https://juejin.cn/post/7317281367111827475 作者:楚留香Ex

(0)
上一篇 2023年12月29日 上午11:09
下一篇 2023年12月29日 下午4:01

相关推荐

发表回复

登录后才能评论