路由方式

官方參考文檔

wx.switchTab

實現底部導航欄

1.配置信息

app.json"tabBar": {"custom": true,"list": [{"pagePath": "pages/home/index","text": "首頁"},{"pagePath": "pages/my/index","text": "我的"}]}

2.tabBar組件

實現一個公共組件custom-tab-bar，在代碼根目錄下添加入口文件：
index.js

Component({data: {value: 'home',list: [{value: 'home',label: '首頁',icon: 'home'},{value: 'my',label: '我的',icon: 'user'},],},lifetimes: {ready() {const pages = getCurrentPages();const curPage = pages[pages.length - 1];if (curPage) {const nameRe = /pages\/(\w+)\/index/.exec(curPage.route);if (nameRe === null) return;if (nameRe[1] && nameRe) {this.setData({value: nameRe[1],});}}},},methods: {handleChange(e) {wx.switchTab({url: `/pages/${e.detail.value}/index`});}}
});

index.json

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

index.wxml

<t-tab-bar value="{{ value }}" theme="tag" split="{{ false }}" bind:change="handleChange"><t-tab-bar-item icon="home" value="home">首頁</t-tab-bar-item><t-tab-bar-item icon="user" value="my">我的</t-tab-bar-item>
</t-tab-bar>

wx.navigateTo

wx.navigateTo({url: '/pages/game/index?id=1',})

需要跳轉的頁面需要注冊在app.json的pages數組里：

  "pages": ["pages/home/index","pages/my/index","pages/game/index"],