项目初始化

miniprogram/pages/index/index.json

@@ -1,5 +1,10 @@
 {
   "usingComponents": {
-    "t-button": "tdesign-miniprogram/button/button"
+    "t-button": "tdesign-miniprogram/button/button",
+    "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
+    "t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item",
+    "home-component":"/pages/home/home",
+    "chat-component":"/pages/chat/chat",
+    "user-component":"/pages/user/user"
   }
 }

miniprogram/pages/index/index.ts

@@ -1,54 +1,20 @@
 // index.ts
 // 获取应用实例
 const app = getApp<IAppOption>()
-const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
-
 Component({
   data: {
-    motto: 'Hello World',
-    userInfo: {
-      avatarUrl: defaultAvatarUrl,
-      nickName: '',
-    },
-    hasUserInfo: false,
-    canIUseGetUserProfile: wx.canIUse('getUserProfile'),
-    canIUseNicknameComp: wx.canIUse('input.type.nickname'),
+    label_value: 'label_1',
+    list: [
+      { label_value: 'label_1', icon: 'home', ariaLabel: '首页' },
+      { label_value: 'label_2', icon: 'chat', ariaLabel: '聊天' },
+      { label_value: 'label_3', icon: 'user', ariaLabel: '我的' },
+    ],
   },
   methods: {
-    // 事件处理函数
-    bindViewTap() {
-      wx.navigateTo({
-        url: '../logs/logs',
-      })
-    },
-    onChooseAvatar(e: any) {
-      const { avatarUrl } = e.detail
-      const { nickName } = this.data.userInfo
+    onChange(e: { detail: { value: any; }; }) {
       this.setData({
-        "userInfo.avatarUrl": avatarUrl,
-        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
-      })
-    },
-    onInputChange(e: any) {
-      const nickName = e.detail.value
-      const { avatarUrl } = this.data.userInfo
-      this.setData({
-        "userInfo.nickName": nickName,
-        hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
-      })
-    },
-    getUserProfile() {
-      // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
-      wx.getUserProfile({
-        desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
-        success: (res) => {
-          console.log(res)
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
-        }
-      })
+        label_value: e.detail.value,
+      });
     },
   },
 })

miniprogram/pages/index/index.wxml

@@ -1,4 +1,16 @@
 <!--index.wxml-->
 <scroll-view class="scrollarea" scroll-y type="list">
-  <t-button theme="primary">按钮</t-button>
+  <view hidden="{{label_value !== 'label_1'}}"><home-component></home-component></view>
+  <view hidden="{{label_value !== 'label_2'}}"><chat-component></chat-component></view>
+  <view hidden="{{label_value !== 'label_3'}}"><user-component></user-component></view>
+  <t-tab-bar t-class="t-tab-bar" value="{{label_value}}" bindchange="onChange" shape="round" theme="tag" split="{{false}}">
+  <t-tab-bar-item
+    wx:for="{{list}}"
+    wx:key="value"
+    value="{{item.label_value}}"
+    icon="{{item.icon}}"
+    ariaLabel="{{item.ariaLabel}}"
+  >
+  </t-tab-bar-item>
+</t-tab-bar>
 </scroll-view>