小程序的底部导航通常会涉及到消息数目的提示，那么在微信小程序的具体应用中我们要如何实现消息数目的提示及删除呢？

效果预览：

从上图可以看出在我的tab栏有一个消息数目的提示，那么关于该提示我们在小程序如何实现！

生成提示代码：

wx.setTabBarBadge({
      index: 3,
      text: '45'
})

参数解析：

index：从左只有第几个tab上进行设置，注：index是从0开始计算

text：提示的消息内容，注：超出4个字符则不会显示具体数据而是以...代替

使用完整方法app.js：

//app.js
App({
  onLaunch: function () {
    wx.setTabBarBadge({
      index: 3,
      text: '45',
      complete: function () {
        console.log("00")
      }
    })
  },
  globalData: {
  }
})

为什么是在app.js中？

很简单，app.js每个页面加载时都会进行调用，如果你设置在单独页面中，那么你可以想象，你没有展示那个页面那么那个页面你所写的提示代码会运行吗？答案显然是不会，既然不会那么就肯定不会有你想要的效果！

所以为了一进入小程序就能展示我们想要的数据，可以把这类数据放在公用的app.js中处理。

移除提示代码：

wx.removeTabBarBadge({
      index:3
})

移除代码，就需要放在我们对应的界面了。道理很简单，对于提示信息，我们希望的结果是他点击了对应tab后才会进行移除操作。换而言之就是我们需要移除代码在进入对应界面后才会执行。

以截图为例，截图定义pages是my

那么我们将移除代码放在my》index.js中。

完整代码：

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

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

  },

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

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

这样设置后，你点击消息提示的tab后就会里面跳转到对应tab页面，进入页面就会立马执行移除消息代码设置。