微信小程序底部导航常见的消息数目提示或者小红点提示，是常见的效果。本文主要介绍如何实现消息的小红点提示，关于消息数目提示大家可以参考另一篇博客《微信小程序底部导航设置消息提示数目、wx.setTabBarBadge基础使用》

右上角小红点效果预览：

实现代码app.js：

//app.js
App({
  onLaunch: function () {
    wx.showTabBarRedDot({
      index: 3
    })
  },
  globalData: {
  }
})

参数解释：

index：从左至右第几个tab，注：是从0开始计算

看到这里也许有人会问为什么要放在app.js这个全局配置中，那么我们试想下如果不放在全局的js而是放在某个子页面的js中会出现什么效果。众所周知，js只有执行后才会有对应的效果，那么对应的是如果我们我们将显示小圆点的代码放在子页面中。一开始进入小程序子页面的js没有被执行，那么你想要的tab右上角的小圆点效果是肯定不会有的。

而如果我们将它放置在全局js中，一进入小程序就会里面执行显示小圆点操作。

右上角小圆点隐藏：（以定义的my文件夹为例）

my》index.js代码设置：

// pages/my/index.js
Page({

  /**
   * 页面的初始数据
   */
  data: {

  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    wx.hideTabBarRedDot({
      index:3
    })
  },

})

这里我们又为什么需要把隐藏代码放在对应的js中？

只有当确认我们点击对应tab后，才需要隐藏右上角的小圆点。也就是，只要打开对应的tab页面，我们才需要执行隐藏小圆点操作。