web学习笔记（七十七）

目录

1.小程序页面的生命周期

2.小程序路由跳转

2.1 navigateTo和navigateBack

2.2 redirectTo、switchTab和reLaunch

---

1.小程序页面的生命周期

（1） onLoad：

生命周期函数--监听页面加载,类似于vue中的created，表示页面实例Page开始加载，此时是可以访问响应式数据及事件方法的。一般页面的初始化请求都放在这里。有一个option参数，是用来接收路由参数的

  onLoad(options) {},

（2） onReady：

生命周期函数--监听页面初次渲染完成。类似于Vue的mounted，此时可以操作dom了，组件挂载阶段。

  onReady() {},

（3）onShow：

生命周期函数--监听页面显示，页面初始化加载以及重新加载都会执行这个函数，重新激活一些功能，比如：视频播放、实时地图定位

  onShow() {  },

（4）onHide：

 生命周期函数--监听页面隐藏。页面隐藏了，关闭一些功能，比如：视频播放、实时地图定位

  onHide() {},

（5）onUnload：

生命周期函数--监听页面卸载

  onUnload() {},

（6）onPullDownRefresh：

 页面相关事件处理函数--监听用户下拉动作

  onPullDownRefresh() {},

（7）onReachBottom：

页面上拉触底事件的处理函数

  onReachBottom() {},

（8）onShareAppMessage：

 用户点击右上角分享

onShareAppMessage() {},

2.小程序路由跳转

2.1 navigateTo和navigateBack

在小程序中我们可以通过navigateTo和navigateBack来实现路由跳转，跳转时可以通过问号来传递参数。需要注意的是navigateTo等价于vue中的push()，会生成历史记录，会保留当前页面（不会被卸载），可以跳转到应用内的某个页面。但是不能跳到tabbar页面。

通过navigateTo跳转步骤：

（1）在按钮上绑定点击事件

  <button bindtap="go">js路由跳转</button>

（2）定义点击事件，并在内部写入跳转代码。

 go() {
    // navigateTo等价于vue中的push()，会生成历史记录，会保留当前页面（不会被卸载），跳转到应用内的某个页面。但是不能跳到tabbar页面。
    wx.navigateTo({
      // ?a=1&b=2  问号传参
      url: "/pages/event/event?a=1&b=2",
    });

通过 navigateBack返回的步骤：

（1）给按钮绑定点击事件

<button bind:tap="back">返回</button>

（2）实现点击事件并编写返回的相关代码，此时也可以通过onLoad拿到路由跳转时传递过来的参数

  back() {
    wx.navigateBack();
  },
  onLoad(option) {
    console.log("------", option);
  },

2.2 redirectTo、switchTab和reLaunch

（1）switchTab

switchTab专门用来跳转tabbar,并且将非tabbar页面卸载掉。

// 在某个事件处理函数中
wx.switchTab({
  url: '/pages/user/user',
  success: function(res) {
    // 成功切换 Tab 时执行
    console.log('switchTab 成功切换到个人中心页');
  },
  fail: function(err) {
    // 切换失败时执行
    console.error('switchTab 切换失败', err);
  }
});

（2） redirectTo

redirectTo用于关闭当前页面，然后跳转到应用内的某个页面。不会保留历史记录，也叫路由的重定向。可以在登录页面进行使用

// 在 pages/index/index 页面的某个事件处理函数中
wx.redirectTo({
  url: '/pages/detail/detail',
  success: function(res) {
    // 成功跳转时执行
    console.log('redirectTo 成功跳转到详情页');
  },
  fail: function(err) {
    // 跳转失败时执行
    console.error('redirectTo 跳转失败', err);
  }
});

（3）reLaunch

reLaunch可以用来关闭所有页面并跳转到对应页面。

// 在 pages/login/login 页面的登录成功处理函数中
wx.reLaunch({
  url: '/pages/index/index',
  success: function(res) {
    // 成功跳转时执行
    console.log('reLaunch 成功跳转到首页');
  },
  fail: function(err) {
    // 跳转失败时执行
    console.error('reLaunch 跳转失败', err);
  }
});