微信小程序跳转其他页面并后退

最新推荐文章于 2024-05-31 22:05:48 发布

不见浅诗～

最新推荐文章于 2024-05-31 22:05:48 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序

本文链接：https://blog.youkuaiyun.com/EcbJS/article/details/112918521

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了微信小程序中navigator组件的使用，包括如何通过navigateTo进行页面跳转，如何实现页面间的传参，以及navigateBack的返回操作和参数处理。重点讲解了组件与JavaScript方式的跳转技巧和传参策略。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本篇文章参考以下博文

文章目录

navigator 组件跳转

这个组件类似 <a> 标签，只需要包裹住需要跳转的部分，然后配置 url 即可。

<navigator url="page/component/search">
    ...
</navigator>

这个组件是自带后退功能的，如下图所示：
在这里插入图片描述

当点击搜索框的时候，会跳转到右侧页面，并且左上角会出现后退按钮。

navigateTo 跳转(JS)

这个跳转方法用的是 wx 提供的 API 。

********** .wxml **********
<view class='tab-view-item' bindtap="indexNavigator">
   <text class="tab-view-item-text">更多>></text>
</view>
 
********** .js **********
indexNavigator:function(e){
  wx.navigateTo({
    url: '/pages/component/more'
  })
},

navigateBack 返回

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
（比如从 A 跳到 B ，然后又从 B 跳到 C ，现在在 C 页面执行 navigateBack ， delta 参数设置为 1 ，就会跳到 B ，如果设置为 2 ，就会跳到 A ，如果设置 大于2 的数，那就会跳到首页）

在小程序插件中使用时，只能在当前插件的页面中调用。

wx.navigateBack({
	delta: 1
});

传参问题

跳转时如果需要传递参数，要按照 get 请求添加到 url 中。

组件传参：

<navigator url="/pages/component/more?id={{item.id}}&checked=ture">
    ...
</navigator>

接收传参：

Page({
  onLoad: function(options) {
    this.setData({
      title: options.id,
      checked: options.checked
    })
  }
})

JS 跳转传参。

wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

JS 接收参数。


//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件，获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})