页面路由，以及传值

先祭献文档地址：https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

这次采用先实践在记录的学习方式，因此以代码为主。

Github地址：https://github.com/caitangbutian/Public-WX-Practice

本随笔分为六部分：

1、wx.switchTab    （跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面）；

2、wx.reLaunch   （关闭所有页面，打开到应用内的某个页面）；

3、wx.redirectTo    （关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面）；

4、wx.navigateTo    （保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。）；

5、wx.navigateBack    （关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。）；

6、EventChannel    （页面间事件通信通道）；

 

---

 1、wx.switchTab    （跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面）；

<view class="black" catchtap="gotoTabBar">
  <view>1、wx.switchTab()</view>
  <view>跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面</view>
</view>

gotoTabBar: function(e) {
    console.clear()
    wx.switchTab({
      url: '../logs/logs',
      success:function(res){
        console.log("成功",res)
      },
      fail: function (res) {
        console.error("失败",res)
      },
      complete: function (res) {
        console.log("结果",res)
      }
    })
  }

 

---

 2、wx.reLaunch   （关闭所有页面，打开到应用内的某个页面）；

<view class="black" catchtap="goReLaunch">
  <view>2、wx.reLaunch()</view>
  <view>关闭所有页面，打开到应用内的某个页面</view>
</view>

//2、
  goReLaunch:function(){
    console.clear();
    wx.reLaunch({
      url: '../logs/logs?id=1'
    })
  }

 

---

 3、wx.redirectTo    （关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面）；

<view class="black" catchtap="goRedirectTo">
  <view>3、wx.redirectTo()</view>
  <view>关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面</view>
</view>

//3、
  goRedirectTo:function(){
    console.clear();
    wx.reLaunch({
      url: '../user/user?id=1'
    })
  },

---

 4、wx.navigateTo    （保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。）；

<view class="black" catchtap="goNavigateTo">
  <view>4、wx.navigateTo()</view>
  <view>保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
　　　　使用 wx.navigateBack 可以返回到原页面。可以使用events页面间通信接口传值</view>
</view>

//4、
  goNavigateTo:function(){
    console.clear();
    wx.navigateTo({
      url: '../user/user?id=1',
      events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        dataReturn: function (data) {
          console.log("index接收到：",data)
        },
  },
      success: function (res) {
        // 页面打开成功后，通过eventChannel（页面间事件通信通道）的emit（触发一个事件）向被打开页面传送数据（打开通道）
        res.eventChannel.emit('dataGet', { data: '数据给予' })
      }
    })
  },

 

---

 5、wx.navigateBack    （关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。）；

<view class="black" catchtap="goNavigateBack">
  <view>5、wx.navigateBack()</view>
  <view>关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。</view>
</view>

 //5、
  goNavigateBack: function () {
    console.clear();
    //navigateBack，返回上一页
    wx.navigateBack({
      delta: 2 // 返回的页面数，如果 delta 大于现有页面数，则返回到首页。
    })
  },

 

---

 6、EventChannel    （页面间事件通信通道）；

方法

EventChannel.emit(string eventName, any args)

触发一个事件

EventChannel.on(string eventName, EventCallback fn)

持续监听一个事件

EventChannel.once(string eventName, EventCallback fn)

监听一个事件一次，触发后失效

EventChannel.off(string eventName, EventCallback fn)

取消监听一个事件。给出第二个参数时，只取消给出的监听函数，否则取消所有监听函数