第一篇文章

做前端以来,一直都有写技术博客的打算,但是出于几个原因一直没有做

1. 觉得作用不大
   觉得技术这个东西如果花大量的时间停留在理论上,倒不如大致学会了某项技术就立即投入实践来得快,就好像学习英语的时候花大量的时间去研究语法,记一些公式和术语,不如多刷题来得实在
2. 觉得网上资深前辈太多,什么样的技术内容都很容易找到,而且讲解的比较深刻,我写的博客对于他人而言作用太小

但是在每次解决一些特别的问题的时候,我自己在备忘录里还是有简单记录的
现在想通了,有时间还是写一写,什么样的能力写什么样的文章,可能对于刚入行或者准备入行的朋友来说,看一些浅显易懂的文章更有利于快速解决初级的问题,随着我的学习,我的文章深度和广度肯定也会增加,这样就够了,这是一个缓慢的过程

这篇文章就不干正事了,最近在做微信小程序,记录一个小问题

微信小程序怎样实现根据后台配置展示底部tabbar?

场景
其实有时可能还需要根据用户的权限在展示相应的tabbar,
或者需要绕过审核机制,这里就不好详细说了
总之就是要实现动态tabbar

但是原生的tabbar是小程序启动前就确定好的,无法动态更改
所以这时我们需要自定义tabbar
而自定义tabbar组件需要在每一个tabbar页面中引用,根据数组渲染,所以思路就是向后端请求一些信息,然后根据这些信息做判断,改变tabbar数组,触发tabbar组件的更新

响应式的问题

因为需要在多个页面重复以上逻辑,这个很麻烦,而且在请求未完成时页面中的tabbar的显示是异常的,这个对于用户体验来说不可接受

如果在app.js中请求数据,更新app的全局变量,让每个tabbar页面都去读取app中的变量,这样行不行呢?
也不行

因为在小程序启动的时候发出的请求,在页面启动时肯定还没有拿到响应,所以页面中显示的tabbar依然是固定的,而且等app.js那边拿到响应,app的全局变量改变时,页面中的tabbar组件也不会有响应式

因为微信小程序的响应式需要使用setData方法改变当前实例中的数据来实现

解决方案

在小程序启动之初,请求服务器,
并在app.js中定义一个变量用来存放这个请求的Promise对象
另一个变量用来存放tabbar数组

在tabbar页面中引入这个promise和tabbar数组,
在promise完成时,使用setData方法将页面中使用的tabbar数组更改为引入的这个tabbar数组

这样就完成了动态tabbar了,解决了响应式问题,具体代码明天贴出来

2024.9.27更新

//app.js
getShowThatTab() {
    this.globalData.showThatTab = new Promise((resolve) => {
      wx.request({
        url: base_url + prefix + 'xxx',
        method: "POST",
        header: {
          'Content-Type': 'application/x-www-form-urlencoded',
          Apikey: "abc",
          version: "v1.0"
        },
        data: {
          loginInfo: JSON.stringify({})
        },
        success: (result) => {
          const data = result.data.data
          if (data === "1") {
            this.globalData.tabbars = tabbars
          }
          resolve(data)
        },
      })
    })
  },

//tabbar页面
async onLoad() {
    await app.globalData.getShowThatTab
    this.setData({
      tabbars: app.globalData.tabbars
    })
  },