微信小程序使用界面API实现tabBar红点的显示和隐藏、tarBar文本的显示和隐藏、tabBar的显示和隐藏、动态改变tanBar的图标和文字 完整代码

好的，下面是完整的微信小程序代码：

//index.js
Page({
  data: {
    tabbar: {},
    activeIndex: 0,
    showRedDot: false,
    hideTabbar: false,
    tabbarList: [
      {
        "text": "首页",
        "iconPath": "/images/home.png",
        "selectedIconPath": "/images/home-active.png"
      },
      {
        "text": "消息",
        "iconPath": "/images/msg.png",
        "selectedIconPath": "/images/msg-active.png",
        "showRedDot": true
      },
      {
        "text": "我的",
        "iconPath": "/images/me.png",
        "selectedIconPath": "/images/me-active.png"
      }
    ]
  },

  onLoad: function () {
    this.initTabbar();
  },

  initTabbar: function () {
    let tabbar = {
      color: "#999999",
      selectedColor: "#FF0000",
      backgroundColor: "#FFFFFF",
      borderStyle: "white",
      list: this.data.tabbarList
    };
    this.setData({ tabbar });
  },

  tabChanged: function (e) {
    let activeIndex = e.detail.index;
    this.setData({ activeIndex });
  },

  showRedDot: function () {
    this.setData({ showRedDot: true });
  },

  hideRedDot: function () {
    this.setData({ showRedDot: false });
  },

  hideTabbar: function () {
    this.setData({ hideTabbar: true });
  },

  showTabbar: function () {
    this.setData({ hideTabbar: false });
  },

  changeTabbar: function () {
    let tabbarList = this.data.tabbarList;
    tabbarList[0].text = "新首页";
    tabbarList[0].iconPath = "/images/new-home.png";
    tabbarList[0].selectedIconPath = "/images/new-home-active.png";
    this.setData({ tabbarList });
  }
})

其中，`tabbarList`是一个数组，里面存储了每个tabBar的信息，包括文本、默认图标、选中图标和是否显示红点等。`tabbar`对象则是整个tabBar的配置信息。

在`onLoad`生命周期函数中，调用`initTabbar`函数初始化整个tabBar。

在`tabChanged`函数中，可以监听tabBar的切换事件，并更新`activeIndex`来表示当前选中的tab。

`showRedDot`和`hideRedDot`函数用于显示和隐藏tabBar上的红点。

`hideTabbar`和`showTabbar`函数分别用于隐藏和显示整个tabBar。

`changeTabbar`函数则是用于动态改变tabBar图标和文本的。

在页面中，需要在`json`文件中配置`tabBar`相关信息，如下：

"tabBar": {
  "custom": true,
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "images/home.png",
      "selectedIconPath": "images/home-active.png"
    },
    {
      "pagePath": "pages/msg/msg",
      "text": "消息",
      "iconPath": "images/msg.png",
      "selectedIconPath": "images/msg-active.png"
    },
    {
      "pagePath": "pages/me/me",
      "text": "我的",
      "iconPath": "images/me.png",
      "selectedIconPath": "images/me-active.png"
    }
  ]
}

其中，`custom`设置为`true`表示自定义tabBar，`list`数组中存储每个tabBar的信息。

在`wxml`文件中，通过`<tabbar>`标签来渲染整个tabBar，如下：

<tabbar bindchange="tabChanged" tabbar="{{tabbar}}" showRedDot="{{showRedDot}}" hideTabbar="{{hideTabbar}}">
  <button slot="tab" wx:for="{{tabbar.list}}" wx:key="index" bindtap="changeTabbar">
    <view class="icon {{index === activeIndex ? 'active' : ''}}">
      <image src="{{index === activeIndex ? item.selectedIconPath : item.iconPath}}"></image>
      <text class="text">{{item.text}}</text>
      <view wx:if="{{item.showRedDot}}" class="red-dot"></view>
    </view>
  </button>
</tabbar>

其中，`<button>`标签用于渲染每个tabBar按钮，`wx:for`循环遍历`tabbar.list`数组，`wx:key`指定唯一标识符。

通过`<view>`标签来渲染图标和文本，并根据`activeIndex`来判断当前选中的tabBar按钮，从而显示对应的图标和文本。

如果`item.showRedDot`为`true`，则显示红点。