当前位置:   article > 正文

微信小程序(跳转)

微信小程序(跳转)

微信小程序中,常用的跳转方式包括以下几种

1.页面跳转

可以使用wx.navigateTowx.redirectTowx.reLaunch方法实现页面的跳转。

  • wx.navigateTo:保留当前页面,跳转到应用内的某个页面。
  • wx.redirectTo:关闭当前页面,跳转到应用内的某个页面。
  • wx.reLaunch:关闭所有页面,打开到应用内的某个页面。

使用wx.navigateTo:该方法可以实现页面的跳转,但是不会关闭当前页面。在跳转到新页面后,用户可以通过返回按钮或手势返回到上一个页面。例如:

  1. wx.navigateTo({
  2. url: '/pages/page2/page2'
  3. })

使用wx.redirectTo:该方法可以实现页面的跳转,但是会关闭当前页面。在跳转到新页面后,用户无法返回到上一个页面。例如:

  1. wx.redirectTo({
  2. url: '/pages/page2/page2'
  3. })

使用wx.switchTab:该方法可以实现跳转到底部导航栏的某个页面。该方法适用于跳转到底部导航栏已经配置的页面。例如 

  1. wx.switchTab({
  2. url: '/pages/page2/page2'
  3. })

 以上是微信小程序中常用的几种页面跳转方式

2.TabBar跳转

在app.json中配置TabBar:首先,在小程序的app.json中配置TabBar的列表,包括每个Tab按钮的路径、文字、图标等信息。示例代码如下:

  1. {
  2. "tabBar": {
  3. "list": [
  4. {
  5. "pagePath": "pages/index/index",
  6. "text": "首页",
  7. "iconPath": "icons/home.png",
  8. "selectedIconPath": "icons/home-selected.png"
  9. },
  10. {
  11. "pagePath": "pages/category/category",
  12. "text": "分类",
  13. "iconPath": "icons/category.png",
  14. "selectedIconPath": "icons/category-selected.png"
  15. },
  16. // 其他TabBar按钮...
  17. ]
  18. }
  19. }

在页面中使用TabBar:在需要显示TabBar的页面中,一般在页面的json配置文件中设置"usingComponents": {}来引入TabBar组件,并在页面的wxml文件中使用<tab-bar>标签放置TabBar组件。示例代码如下:

  1. {
  2. "usingComponents": {
  3. "tab-bar": "/components/tab-bar/tab-bar"
  4. }
  5. }
  1. <!-- 页面的wxml文件中 -->
  2. <tab-bar
  3. selected="{{selected}}"
  4. bind:changeTab="changeTab"
  5. />

3.重定向

可以使用wx.navigateBack方法返回到上一个页面。

  1. wx.navigateBack({
  2. delta: 1
  3. })

4.WebView跳转

可以在小程序中嵌入 WebView,实现跳转到外部链接。

  1. wx.navigateTo({
  2. url: '/pages/webview/webview?url=https://www.example.com'
  3. })

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/756082
推荐阅读
相关标签
  

闽ICP备14008679号