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

本篇文章参考以下博文

文章目录

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)
    })
  }
})