当前位置：首页 > news >正文

微信小程序 tabBar 切换实现

news 2025/9/18 5:55:07

该 demo 使用的是由腾讯团队开发的 tDesign 组件 - https://tdesign.tencent.com/miniprogram/getting-started

一、npm 初始化

npm init
一直回车直到 package.json 出现

二、安装 tDesign 包

npm i tdesign-miniprogram -S --production
安装完之后，需要在微信开发者工具中对 npm 进行构建：工具 - 构建 npm。（构建时若出现NPM packages not found字样，参照以下方式修改 project.config.json文件）

{"setting": {"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram/"}],
}

修改完成后，切记需要重新启动项目生效，重新构建 npm 即可！

三、新建 pages 页面（略）

四、修改 app.json 配置

{"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/home","text": "首页"},{"pagePath": "pages/course/course","text": "课程"},{"pagePath": "pages/signup/signup","text": "报名"},{"pagePath": "pages/usercenter/usercenter","text": "我的"}]},
}

五、miniprogram根目录下新建 `custom-tab-bar`文件夹

index.json

{"component": true,"usingComponents": {"t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar","t-tab-bar-item": "tdesign-miniprogram/tab-bar-item/tab-bar-item"}
}

index.wxml

<!--custom-tab-bar/index.wxml-->
<view class="wrapper"><t-tab-bar t-class="t-tab-bar" value="{{activeTabBarIndex}}" bindchange="onChange"><t-tab-bar-item wx:for="{{list}}" wx:key="index" icon="{{item.icon}}">{{item.text}}</t-tab-bar-item></t-tab-bar>
</view>

data.js（此处把 tabBar 数据抽离出来）

export default [{icon: 'home',value: 'home',text: '首页',url: '/pages/home/home',},{icon: 'course',value: 'course',text: '课程',url: '/pages/course/course',},{icon: 'wallet',value: 'signup',text: '报名',url: '/pages/signup/signup',},{icon: 'user-1',value: 'usercenter',text: '我的',url: '/pages/usercenter/usercenter',},
];

下面使用全局数据共享 Mobx，使用 data 好像会踩坑【wx.switchTab 的异步问题】

在小程序中，可使用mobx-miniprogram配合mobx-miniprogram-bindings实现全局数据共享。其中：

A. mobx-miniprogram用来创建Store实例对象
B. mobx-miniprogram-bindings用来把Store中的共享数据或方法，绑定到组件或页面中使用

六、安装Mobx包

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1
注意：MobX相关的包安装完毕之后，记得删除miniprogram_npm目录后，重新构建npm

七、根目录下创建store文件夹，然后创建MobX的Store实例

store.js

import {action,observable
} from 'mobx-miniprogram'export const store = observable({activeTabBarIndex: 0,updateActiveTabBarIndex: action(function (index) {this.activeTabBarIndex = index;})
})

八、组件调用store

index.js

// custom-tab-bar/index.js
import tabMenu from './data'
import {storeBindingsBehavior
} from 'mobx-miniprogram-bindings'
import {store
} from '../store/store'
Component({behaviors: [storeBindingsBehavior], // 通过storeBindingsBehavior来实现自动绑定storeBindings: {store, // 指定要绑定的storefields: { // 指定要绑定的字段数据activeTabBarIndex: () => store.activeTabBarIndex, // 绑定字段的第一种方式},actions: { //指定要绑定的方法updateActive: 'updateActiveTabBarIndex'},},/*** 组件的属性列表*/properties: {},/*** 组件的初始数据*/data: {list: tabMenu},/*** 组件的方法列表*/methods: {onChange(event) {const index = event.detail.value;const url = this.data.list[index].url.startsWith('/')? this.data.list[index].url: `/${this.data.list[index].url}`;this.updateActive(event.detail.value); wx.switchTab({url})}}
})