Taro v4框架开发微信小程序(路由跳转-基础)

理解Taro中的页面跳转机制

在开发Taro应用时,页面间的导航是一个核心功能。Taro提供了几种路由跳转函数来实现页面的跳转,这些函数允许开发者根据需要选择不同的跳转行为。

使用navigateTo函数,我们可以将用户带到一个新页面,同时保留当前页。这种跳转方式允许用户使用返回按钮返回到先前的页面。

typescript 复制代码
// 跳转到指定新页面
Taro.navigateTo({
  url: '/pages/page/path/name',
});

redirectTo

navigateTo不同,redirectTo函数将关闭当前页面并打开一个新页面。在使用此函数之后,用户将无法返回到先前的页面。

typescript 复制代码
// 关闭当前页面,重定向到新页面
Taro.redirectTo({
  url: '/pages/page/path/name',
});

通常在用户需要回退到之前浏览的页面时使用navigateBack函数。这会将用户带回堆栈中的前一个页面。它的行为类似于浏览器的后退按钮。

typescript 复制代码
// 返回到之前的页面
Taro.navigateBack();

switchTab

switchTab函数用于在tabBar页面之间进行切换。使用此函数时,会跳转到应用的一个tabBar页面,并关闭其他非tabBar页面。

typescript 复制代码
// 切换到指定的tabBar页面
Taro.switchTab({
  url: '/pages/path/name',
});

传递和接收路由参数

跳转到新页面时经常需要向目标页面传递参数。

通过在URL后面附加查询字符串的方式来传递参数。

参数传递

假设我们想要传递idtype两个参数给目标页面,可以通过在url中添加查询字符串来完成:

typescript 复制代码
// 向目标页面传递参数 id=2 和 type=test
Taro.navigateTo({
  url: '/pages/page/path/name?id=2&type=test',
});

在目标页面中获取参数

跳转完成后,在目标页面,我们可以用两种方法获取到传递过来的参数:

方法一

我们可以使用Taro.getCurrentInstance().router?.params在页面的生命周期方法内获取路由参数。这种方法可以确保在页面加载时就拥有参数数据:

javascript 复制代码
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的回调函数参数。当页面加载完成后,该函数将被调用,并传入路由参数:

javascript 复制代码
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页面,并携带参数idtype

javascript 复制代码
// 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钩子函数来获取页面加载时传入的参数。

javascript 复制代码
// 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的样式及其中的页面路径和文本:

ts 复制代码
// 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的用法:

javascript 复制代码
// 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页面myuseLoad钩子函数中,仍然可以像在其他页面一样获取到页面参数:

javascript 复制代码
// 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属性中指定目标页面的路径和携带的参数。

javascript 复制代码
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一样。
javascript 复制代码
<Navigator url='/pages/my/index' openType='switchTab'>切换到 "我的" 页面</Navigator>

使用openType='switchTab'的Navigator,在点击时会将用户带到TabBar中的my页面。

参数作用

  1. target: 指定跳转目标的应用类型,通常是当前小程序(self)或者其他小程序(miniProgram)。
  2. url: 要跳转到的页面路径。必须是以/开头的完整路径。
  3. openType: 跳转方式,可以是navigate(保留当前页面,跳转到应用内的某个页面),redirect(关闭当前页面,跳转到应用内的某个页面),等等。
  4. delta: 当openTypenavigateBack时有效,表示页面回退的层数。
  5. appId: 当target="miniProgram"时有效,表示要打开的小程序的appId。
  6. path: 当target="miniProgram"时有效,表示要打开的小程序内页面的路径。
  7. extraData: 当target="miniProgram"时有效,表示要传递给目标小程序的数据。
  8. version: 当target="miniProgram"时有效,表示要打开的小程序版本,如开发版(develop)、体验版(trial)、正式版(release)。
  9. hoverClass: 点击态的样式类。
  10. hoverStopPropagation: 指定是否阻止本节点的祖先节点出现点击态。
  11. hoverStartTime: 按住触发点击态的时间。
  12. hoverStayTime: 手指松开后点击态保留时间。
  13. shortLink: 当target="miniProgram"时有效,通过短链跳转小程序,可以不用指定appIdpath
  14. ariaLabel: 无障碍访问的属性元素描述。
  15. onSuccess: 当target="miniProgram"时有效,跳转小程序成功时触发的事件。
  16. onFail: 当target="miniProgram"时有效,跳转小程序失败时触发的事件。
  17. onComplete: 当target="miniProgram"时有效,调用完成时触发的事件(无论成功或失败)。

查看TypeScript类型声明

了解和使用TypeScript类型声明文件对于编写类型安全的代码非常重要,它们为组件和函数提供了预定义的类型。可以在编辑器中直查看和利用,以获取更高的开发效率和代码质量。

相关推荐
赵庆明老师几秒前
Uniapp微信小程序开发:微信小程序支付功能后台代码
微信小程序·小程序·uni-app
im_AMBER13 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦39 分钟前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码41 分钟前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.1 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..1 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead2 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室3 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia3 小时前
02--CSS基础
前端·css