Taro v4框架开发微信小程序（路由跳转-基础）
理解Taro中的页面跳转机制
在开发Taro应用时，页面间的导航是一个核心功能。Taro提供了几种路由跳转函数来实现页面的跳转，这些函数允许开发者根据需要选择不同的跳转行为。
navigateTo
使用navigateTo函数，我们可以将用户带到一个新页面，同时保留当前页。这种跳转方式允许用户使用返回按钮返回到先前的页面。
// 跳转到指定新页面
Taro.navigateTo({
url: '/pages/page/path/name',
});
redirectTo
与navigateTo不同，redirectTo函数将关闭当前页面并打开一个新页面。在使用此函数之后，用户将无法返回到先前的页面。
// 关闭当前页面，重定向到新页面
Taro.redirectTo({
url: '/pages/page/path/name',
});
navigateBack
通常在用户需要回退到之前浏览的页面时使用navigateBack函数。这会将用户带回堆栈中的前一个页面。它的行为类似于浏览器的后退按钮。
// 返回到之前的页面
Taro.navigateBack();
switchTab
switchTab函数用于在tabBar页面之间进行切换。使用此函数时，会跳转到应用的一个tabBar页面，并关闭其他非tabBar页面。
// 切换到指定的tabBar页面
Taro.switchTab({
url: '/pages/path/name',
});
传递和接收路由参数
跳转到新页面时经常需要向目标页面传递参数。
通过在URL后面附加查询字符串的方式来传递参数。
参数传递
假设我们想要传递id和type两个参数给目标页面，可以通过在url中添加查询字符串来完成：
// 向目标页面传递参数 id=2 和 type=test
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test',
});
在目标页面中获取参数
跳转完成后，在目标页面，我们可以用两种方法获取到传递过来的参数：
方法一
我们可以使用Taro.getCurrentInstance().router?.params获取路由参数。这是全局的API，可以在任意地方（包括自定义hooks、事件处理函数等）获取当前路由的参数，不限于某个特定的钩子。
import { View, Text } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import './index.scss';
export default function Page() {
useLoad(() => {
const params = Taro.getCurrentInstance().router?.params;
console.log(params); // { id: '2', type: 'test' }
});
return (
<View className='page'>
<Text>Welcome to the Page!</Text>
</View>
);
}
方法二
另一个获取传递参数的方式是使用useLoad的回调函数参数。当页面加载完成后，该函数将被调用，并传入路由参数，这种方法在页面初次加载时只被调用一次。如果参数在页面未卸载的情况下发生变化，该钩子不会再次被触发。
import { View, Text } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import './index.scss';
export default function Page() {
useLoad((params) => {
console.log(params); // { id: '2', type: 'test' }
});
return (
<View className='page'>
<Text>Welcome to the Page!</Text>
</View>
);
}
示例
接下来我们通过示例来演示：
在index页面中，我们希望在用户点击文本时跳转到my页面，并携带参数id和type。
// index页面
import { View, Text } from '@tarojs/components'
import Taro from '@tarojs/taro'
import './index.scss'
export default function Index() {
const handleTextClick = () => {
Taro.navigateTo({
url: '/pages/my/index?id=2&type=test'
});
};
return (
<View className='index'>
<Text onClick={handleTextClick}>跳转到my页面</Text>
</View>
);
}
这段代码中，handleTextClick函数使用了Taro.navigateTo方法，并在URL中加入了查询字符串参数。
参数获取
在my页面，我们使用useLoad钩子函数来获取页面加载时传入的参数。
// my页面
import { View, Text } from '@tarojs/components'
import Taro, { useLoad } from '@tarojs/taro'
import './index.scss'
export default function My() {
useLoad((params) => {
// 参数在params中，形如：{ id: '2', type: 'test' }
console.log(params);
});
return (
<View className='my'>
<Text>欢迎来到my页面！</Text>
</View>
);
}
在useLoad的回调函数中，我们便能获取到传递来的参数，并作相应处理。
运行效果
当用户在index页面点击文本时，将跳转到my页面，并在控制台打印出传递过来的参数，如{ id: '2', type: 'test' }。这种方式为页面跳转提供了简单明了的参数传递和获取手段，有助于开发者构建具有良好用戶体验的应用。
切换TabBar页面
当我们的应用包含底部的TabBar时，切换不同的Tab页面需要使用switchTab方法。下面通过配置文件和页面代码来解释这一过程。
配置TabBar页面
在app.config.ts文件中配置TabBar参数，定义TabBar的样式及其中的页面路径和文本：
// app.config.ts文件
export default defineAppConfig({
pages: [
'pages/index/index',
'pages/my/index'
],
window: {
/* ...其他配置... */
},
tabBar: {
color: "#434343",
selectedColor: "#333333",
borderStyle: "white",
position: "bottom",
backgroundColor: "#ffffff",
list: [
{
pagePath: "pages/index/index",
text: "首页"
},
{
pagePath: "pages/my/index",
text: "我的"
},
]
}
});
这段配置确定了TabBar的样式和包含的页面，用户在点击Tab时能看到对应的页面。
TabBar页面之间的切换
在index页面，提供了两个按钮，演示了navigateTo（这里会报错因为不能用于Tab界面的跳转）和switchTab的用法：
// index页面
// index页面
import { View, Button } from '@tarojs/components';
import Taro from '@tarojs/taro';
import './index.scss';
export default function Index() {
const handleNavigateTo = () => {
Taro.navigateTo({
url: '/pages/my/index'
});
};
const handleSwitchTab = () => {
Taro.switchTab({
url: '/pages/my/index'
});
};
return (
<View className='index'>
<Button onClick={handleNavigateTo}>navigateTo跳转（会报错）</Button>
<Button onClick={handleSwitchTab}>切换到 “我的” 页面</Button>
</View>
);
}
使用switchTab时，用户会切换到TabBar定义的my页面，实现页面切换的同时保持了TabBar的状态。
在TabBar页面获取参数
在TabBar页面my的useLoad钩子函数中，仍然可以像在其他页面一样获取到页面参数：
// my页面
import { View, Text } from '@tarojs/components';
import Taro, { useLoad } from '@tarojs/taro';
import './index.scss';
export default function My() {
useLoad((params) => {
console.log(params);
});
return (
<View className='my'>
<Text>辰火流光!</Text>
</View>
);
}
效果展示
用户在点击按钮时，应用会切换到我的页面，正如下面的动画所示
路由跳转组件
Navigator组件是一个便利的工具，用于在页面间实现跳转。它通过设置url参数来指定跳转目标，无需编写额外的JavaScript代码。下面是Navigator组件的基本使用方法。
基本跳转
可以直接在Navigator组件的url属性中指定目标页面的路径和携带的参数。
import { View, Navigator } from '@tarojs/components';
export default function Index() {
return (
<View className='index'>
<Navigator url='/pages/my/index?id=2&type=test'>跳转到my页面</Navigator>
</View>
);
}
当用户点击这个Navigator组件时，就会实现从当前页面跳转到my页面，并且传递id=2&type=test参数。
openType属性
Navigator组件的openType属性允许指定跳转的方式。默认情况下，其值为navigate。下面是一些常见的openType值及其作用：
navigate: 保留当前页面，跳转到应用内的某个页面，就像调用Taro.navigateTo一样。redirect: 关闭当前页面，跳转到应用内的某个页面，就像调用Taro.redirectTo一样。switchTab: 跳转到TabBar页面，并关闭其他非TabBar页面，就像调用Taro.switchTab一样。
<Navigator url='/pages/my/index' openType='switchTab'>切换到 “我的” 页面</Navigator>
使用openType='switchTab'的Navigator，在点击时会将用户带到TabBar中的my页面。
参数作用
target: 指定跳转目标的应用类型，通常是当前小程序（self）或者其他小程序（miniProgram）。url: 要跳转到的页面路径。必须是以/开头的完整路径。openType: 跳转方式，可以是navigate（保留当前页面，跳转到应用内的某个页面），redirect（关闭当前页面，跳转到应用内的某个页面），等等。delta: 当openType为navigateBack时有效，表示页面回退的层数。appId: 当target="miniProgram"时有效，表示要打开的小程序的appId。path: 当target="miniProgram"时有效，表示要打开的小程序内页面的路径。extraData: 当target="miniProgram"时有效，表示要传递给目标小程序的数据。version: 当target="miniProgram"时有效，表示要打开的小程序版本，如开发版（develop）、体验版（trial）、正式版（release）。hoverClass: 点击态的样式类。hoverStopPropagation: 指定是否阻止本节点的祖先节点出现点击态。hoverStartTime: 按住触发点击态的时间。hoverStayTime: 手指松开后点击态保留时间。shortLink: 当target="miniProgram"时有效，通过短链跳转小程序，可以不用指定appId和path。ariaLabel: 无障碍访问的属性元素描述。onSuccess: 当target="miniProgram"时有效，跳转小程序成功时触发的事件。onFail: 当target="miniProgram"时有效，跳转小程序失败时触发的事件。onComplete: 当target="miniProgram"时有效，调用完成时触发的事件（无论成功或失败）。
查看TypeScript类型声明
了解和使用TypeScript类型声明文件对于编写类型安全的代码非常重要，它们为组件和函数提供了预定义的类型。可以在编辑器中直查看和利用，以获取更高的开发效率和代码质量。
