微信小程序 路由跳转

路由方式

官方参考文档

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"],