微信小程序路由详解
发布时间：2021-06-07 08:49 所属栏目：小程序开发教程
1. 路由方式
| 路由方式 | 触发时机 | 路由前页面 | 路由后页面 |
|---|---|---|---|
| 初始化 | 小程序打开的第一个页面 | onLoad, onShow | |
| 打开新页面 | 调用 API wx.navigateTo 或使用组件 | onHide | onLoad, onShow |
| 页面重定向 | 调用 API wx.redirectTo 或使用组件 | onUnload | onLoad, onShow |
| 页面返回 | 调用 API wx.navigateBack 或使用组件或用户按左上角返回按钮 | onUnload | onShow |
| Tab 切换 | 调用 API wx.switchTab 或使用组件 或用户切换 Tab | 各种情况请参考下表 | |
| 重启动 | 调用 API wx.reLaunch 或使用组件 | onUnload | onLoad, onShow |
用法如下：
<navigator url="/pages/detail/detail" open-type='navigate' style='border:1px solid red;' >进入非tab页</navigator> <navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator> <navigator url="/pages/index/index" open-type='switchTab' >进入首页(tab页)</navigator> <navigator open-type='navigateBack' >回退</navigator>
- navigateTo, redirectTo 只能打开非 abBar 页面。
- switchTab 只能打开 tabBar 页面。
- reLaunch可以打开任意页面, 但是没有返回按钮，需要定义一个可以点击回退的按钮。
- 页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
- 调用页面路由带的参数可以在目标页面的onLoad中获取。
2. 路由传参
从列表页进入详情页时，需要传递列表被点击项目的 id 至详情页，方法：
- 在列表页通过data-id='{{item.id}}'给各个项目绑定一个 id ；
- 在详情页通过 onload 拿到 id;
列表页：
<view class="list" >
<view class='box' wx:for='{{list}}' wx:key='{{index}}' data-id='{{item.id}}' bindtap='goDetail'>
<image src='{{item.img}}'></image>
<view class='tip'>
<text>{{item.title}}</text>
<text class='price'>￥{{item.price}}</text>
</view>
</view>
</view>
// 进入详情页时 传递 id
goDetail (e) {
console.log(e.currentTarget.dataset.id),
wx.navigateTo({
url: `/pages/detail/detail?id=${e.currentTarget.dataset.id}`,
})
},
详情页:
// pages/detail/detail.js
Page({
data: {
detail: {},
loading: true
},
onLoad: function (options) {
this.loadDetail(options.id); // 拿到列表页传过来的 id
console.log(options.id)
},
loadDetail (id) {
wx.showLoading({
title: '详情加载中...',
})
wx.request({
url: 'http://10.0.1.109:3000/list',
success: (res) => {
console.log(res.data.cityList);
let thisPlace = res.data.cityList.filter((val) => val.id == id)
console.log(thisPlace)
this.setData({
detail: thisPlace[0],
loading: false
});
console.log(this.data.detail)
wx.hideLoading();
}
})
},
})
