小程序页面跳转及返回总结_小程序页面返回事件

bug
tabbar 页面离开均执行 onHide ,
二级页面前进执行 onHide ，后退执行 onUnload

页面栈

let pages = getCurrentPages();    //获取当前页面信息栈
pages.length为页面栈层数（包括当前页，如果是一进来第一个页面，则为1）
let prevPage = pages[pages.length-2]     //获取上一个页面信息栈（pages为数组，所以-2）
1
2
3

1、跳转方式

1. wx.switchTab(Object object)
   跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

2. wx.reLaunch(Object object)
   基础库 1.1.0 开始支持，低版本需做兼容处理。
   关闭所有页面，打开到应用内的某个页面

3. List wx.redirectTo(Object object)
   关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面

4. wx.navigateTo(Object object)
   保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。
   使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
   只有这个页面有返回按钮

2、普通页面跳转并携带参数

 wx.navigateTo({
        url: `/pages/circle_detail/circle_detail?id=${id}`        // 携带参数
      })
1
2
3

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.id);          // 接收参数
  },
1
2
3
4
5
6

3、页面返回不刷新并携带参数

在返回前将参数存在本地，返回后从本地取出

// 点击话题，返回创建圈子页面
  back(e) {
    // 0 不参与  1 新话题  其他 选中的话题
    let val = e.currentTarget.dataset.val;
    let topic;
    console.log(val);
    if (val == 0) {
      topic = ''
    } else if (val == 1) {
      topic = this.data.searchVal
    } else {
      topic = val
    }
    wx.setStorageSync('topic', topic)   //先存储，再返回
    wx.navigateBack({
      delta: 1,  //返回的层数
    })

  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

 /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let topic=wx.getStorageSync('topic')
    console.log(topic);
  },
1
2
3
4
5
6
7

4、返回上一页并刷新页面或刷新组件

情况一 返回使上一个页面刷新，可以将初始化数据请求接口放在onshow（），而不是onload ()
情况二 返回使上一个页面中的组件刷新
例如：页面关系 a页面中组件a1，跳转b页面，返回a1刷新

// a页面定义一个变量showCommy控制组件a1显示隐藏
 <com-my wx:if="{{showCommy}}"></com-my>
  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      showCommy: true
    })
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    this.setData({
      showCommy: false
    })
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

// a1组件，在ready（）中调初始化数据接口
ready() {
    request('circle/circleList', {
      condition: 2
    }).then(data => {
      console.log(data)  // 成功回调
      this.setData({
        list: data.list
      })
    })
  },
1
2
3
4
5
6
7
8
9
10
11