从入门到精通:微信小程序跳转页面的实用指南

前言

微信小程序中页面跳转方法的灵活运用不仅可以提升用户体验,还能为应用增添更多创意和吸引力。本文将为大家详细介绍微信小程序跳转页面的方法,让你的应用与众不同,为用户带来全新的体验。


方式一:wx.navigateTo

保留当前页面,跳转到应用内的某个页面。可以通过调用 wx.navigateBack 返回到原页面。跳转后左上角出现返回小箭头,点击后可返回原本页面。示例代码:

wx.navigateTo({
    url: '../carDetails/carDetails'
})
  • 使用场景

    适用于需要跳转到新页面并保留原页面状态的情况,比如从列表页跳转到详情页。

  • 优点

    可以保留原页面的状态,用户返回时可以继续操作。

  • 缺点

    每次跳转都会创建新页面,可能会占用较多的内存资源。

在这里插入图片描述


方式二:wx.redirectTo

关闭当前页面,跳转到应用内的某个页面,不能跳转 tabbar 页面,跳转后左上角出现返回首页图标,点击后可返回首页面。示例代码:

wx.redirectTo({
  url: '../carDetails/carDetails'
})
  • 使用场景

    适用于需要关闭当前页面并跳转到新页面的情况,比如登录成功后跳转到首页。

  • 优点

    可以直接关闭当前页面,减少内存占用。

  • 缺点

    无法保留原页面的状态,用户返回时会重新加载页面。

在这里插入图片描述


方式三:wx.reLaunch

关闭所有页面,打开应用内的某个页面,跳转后左上角出现返回首页图标,点击后可返回首页面。示例代码:

wx.reLaunch({
  url: '../carDetails/carDetails'
})
  • 使用场景

    适用于需要关闭所有页面并打开新页面的情况,比如用户退出登录后跳转到登录页。

  • 优点

    可以清空页面栈,减少内存占用。

  • 缺点

    无法保留原页面的状态,用户返回时会重新加载页面。

在这里插入图片描述


方式四:wx.switchTab

跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,该方法只能跳转 tabbar 页面。 示例代码:

wx.switchTab({
  url: '../install/install'
})
  • 使用场景

    适用于需要跳转到 tabBar 页面的情况,比如从其他页面跳转到首页。

  • 优点

    可以直接跳转到 tabBar 页面,方便用户导航。

  • 缺点

    无法保留原页面的状态,用户返回时会重新加载页面。

在这里插入图片描述


方式五:<navigator url=""><navigator/>

通过设置 url 属性来指定跳转的目标页面。 示例代码:

<navigator url="../carDetails/carDetails"><button>我是A页面,点击跳转到B页面</button></navigator>
  • 使用场景

    适用于需要在页面中添加跳转链接的情况,比如在列表页中点击某个项跳转到详情页。

  • 优点

    使用简单,可以直接在页面中添加跳转链接。

  • 缺点

    无法保留原页面的状态,用户返回时会重新加载页面。

  • 注意

    <navigator> 组件只能跳转到小程序内的页面,无法跳转到外部链接。如果需要跳转到外部链接,可以使用 <a> 标签,并设置 open-type 属性为 navigate

在这里插入图片描述


拓展 – 如何配置 tabBar

app.json 文件中配置 tabBar 属性,包括 listcolor 属性。

list 属性是一个数组,每个元素代表一个 tab 项,可以设置 iconPathselectedIconPathpagePathtext 等属性。在 app.js 文件中的 onLaunch 函数中设置 tabBar 的初始状态。可以使用 wx.hideTabBar() 函数隐藏 tabBar,或者使用 wx.showTabBar() 函数显示 tabBar。在需要显示 tabBar 的页面中,可以通过设置页面的 navigationBarTitleText 属性来显示对应的 tab 项的文字。

属性描述
color未选中文字颜色
selectedColor选中文字颜色
backgroundColor背景颜色
pagePath页面路径
text名称
iconPath默认图标路径
selectedIconPath选中图标路径

实例代码

"tabBar": {
  "color": "#8a8a8a",
  "selectedColor": "#1296db",
  "backgroundColor": "#e6e6e6",
  "list": [
    {
      "pagePath": "pages/main/main",
      "text": "首页",
      "iconPath": "./assets/main.png",
      "selectedIconPath": "./assets/main1.png"
    },
    {
      "pagePath": "pages/message/message",
      "text": "消息",
      "iconPath": "./assets/message.png",
      "selectedIconPath": "./assets/message1.png"
    },
    {
      "pagePath": "pages/install/install",
      "text": "设置",
      "iconPath": "./assets/install.png",
      "selectedIconPath": "./assets/install1.png"
    }
  ]
},

app.js 文件中的 onLaunch 函数中设置初始状态

onLaunch: function () {
  wx.hideTabBar(); // 隐藏tabBar
  // wx.hideTabBar(); // 显示tabBar
}

在需要显示 tabBar 的页面中设置 navigationBarTitleText 属性

Page({
  onLoad: function () {
    wx.setNavigationBarTitle({
      title: '首页'
    })
  }
})
  • 17
    点赞
  • 206
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

水星记_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值