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

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

页面栈

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

1、跳转方式

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

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

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

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,  //返回的层数
    })

  },

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

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

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