页面路由与生命周期

路由跳转

wx.navigateTo - 保留当前页面，跳转到新页面

将新页面压入页面栈，当前页面被保留。

特点：

• 新页面进入动画从右到左
• 当前页面不会卸载，可以通过 wx.navigateBack 返回
• 左上角有返回按钮

限制：不能用于跳转到 tabBar 页面

URL 参数：可以通过 URL 传递参数

// 跳转到新页面，并传递参数
wx.navigateTo({
  url: '/pages/detail/detail?id=123&name=abc'
})

// 在目标页面的 onLoad 中接收参数
// detail.js
Page({
  onLoad: function(options) {
    console.log(options.id)    // "123"
    console.log(options.name)  // "abc"
  }
})

wx.redirectTo - 关闭当前页面，跳转到新页面

关闭当前页面，将新页面压入页面栈。

特点：

• 新页面替换当前页面
• 当前页面会被卸载
• 左上角没有返回按钮

限制：不能用于跳转到 tabBar 页面

使用场景：登录页跳转到首页、不需要返回的场景

// 关闭当前页面，跳转到新页面
wx.redirectTo({
  url: '/pages/home/home'
})

wx.switchTab - 跳转到 tabBar 页面

跳转到 tabBar 页面，并关闭所有非 tabBar 页面。

特点：

• 会清空页面栈中所有非 tabBar 页面
• 只能跳转到在 app.json 中 tabBar 配置的页面

限制：只能跳转到 tabBar 页面，不能传递 URL 参数

// 跳转到 tabBar 页面
wx.switchTab({
  url: '/pages/index/index'
})

wx.reLaunch - 关闭所有页面，打开到应用内的某个页面

关闭所有页面，打开到应用内的某个页面。

特点：

• 清空整个页面栈，然后打开新页面
• 可以跳转到任意页面（包括 tabBar 页面）

使用场景：应用重启、回到首页等需要清空历史记录的场景

// 关闭所有页面，打开到首页
wx.reLaunch({
  url: '/pages/index/index'
})

wx.navigateBack - 返回上一页面或多级页面

关闭当前页面，返回上一页面或多级页面。

参数：

• delta： 返回的页面数，默认值为 1

// 返回上一页面
wx.navigateBack()

// 返回前两页面
wx.navigateBack({
  delta: 2
})

// 返回到首页（假设首页在栈底）
wx.reLaunch({
  url: '/pages/index/index'
})

应用生命周期（app.js）

应用生命周期函数定义在 app.js 中，监控整个小程序的启动、显示、隐藏等状态。

// app.js
App({
  // 1. 小程序初始化完成时触发（全局只触发一次）
  onLaunch: function(options) {
    console.log('小程序启动了')
    
    // 获取启动参数
    console.log('启动场景:', options.scene)
    console.log('启动路径:', options.path)
    console.log('启动参数:', options.query)
    
    // 常见的初始化操作：
    // - 获取用户信息
    // - 检查登录状态
    // - 初始化云开发
    // - 获取系统信息
    // - 设置全局数据
    
    // 示例：检查登录状态
    const token = wx.getStorageSync('token')
    if (token) {
      this.checkSession()
    }
  },
  
  // 2. 小程序启动，或从后台进入前台显示时触发
  onShow: function(options) {
    console.log('小程序显示了')
    
    // 常见的操作：
    // - 统计页面访问
    // - 恢复游戏、音乐播放等
    // - 检查更新
  },
  
  // 3. 小程序从前台进入后台时触发
  onHide: function() {
    console.log('小程序隐藏了')
    
    // 常见的操作：
    // - 暂停游戏、音乐播放等
    // - 清除定时器
    // - 保存临时数据
  },
  
  // 4. 小程序发生脚本错误，或者 api 调用失败时触发
  onError: function(error) {
    console.error('小程序出错了:', error)
    
    // 错误上报到监控系统
    wx.request({
      url: 'https://your-error-api.com/report',
      data: { error: error.toString() }
    })
  },
  
  // 自定义全局方法
  checkSession: function() {
    wx.checkSession({
      success: () => {
        console.log('session 有效')
      },
      fail: () => {
        console.log('session 失效，需要重新登录')
        this.globalData.needLogin = true
      }
    })
  },
  
  // 全局数据
  globalData: {
    userInfo: null,
    needLogin: false,
    systemInfo: null
  }
})

应用生命周期触发场景：

• onLaunch：小程序初始化完成时（冷启动）
• onShow：
  • 小程序启动时
  • 从后台切回前台时
  • 从其他小程序返回时
• onHide：
  • 切到后台时
  • 导航到其他小程序时

页面生命周期（page.js）

页面生命周期函数定义在每个页面的 .js 文件中，监控单个页面的加载、显示、就绪等状态。

// pages/detail/detail.js
Page({
  data: {
    product: null,
    loading: true
  },
  
  // 1. 页面加载时触发，一个页面只调用一次
  onLoad: function(options) {
    console.log('页面加载，参数:', options)
    
    // 获取路由参数
    const productId = options.id
    
    // 常见的操作：
    // - 根据参数请求数据
    // - 初始化页面数据
    this.fetchProductDetail(productId)
  },
  
  // 2. 页面显示/切入前台时触发
  onShow: function() {
    console.log('页面显示了')
    
    // 常见的操作：
    // - 更新数据（如购物车数量）
    // - 开始动画
    // - 订阅消息
  },
  
  // 3. 页面初次渲染完成时触发，一个页面只调用一次
  onReady: function() {
    console.log('页面渲染完成了')
    
    // 常见的操作：
    // - 操作页面DOM（通过wx.createSelectorQuery）
    // - 开始复杂的动画
  },
  
  // 4. 页面隐藏/切入后台时触发
  onHide: function() {
    console.log('页面隐藏了')
    
    // 常见的操作：
    // - 暂停动画、视频播放
    // - 取消订阅
    // - 保存表单草稿
  },
  
  // 5. 页面卸载时触发，一个页面只调用一次
  onUnload: function() {
    console.log('页面卸载了')
    
    // 常见的操作：
    // - 清除定时器
    // - 取消网络请求
    // - 清理全局事件监听
  },
  
  // 6. 下拉刷新时触发（需要在页面配置中开启enablePullDownRefresh）
  onPullDownRefresh: function() {
    console.log('用户下拉刷新了')
    
    // 重新加载数据
    this.refreshData().then(() => {
      // 停止下拉刷新动画
      wx.stopPullDownRefresh()
    })
  },
  
  // 7. 页面上拉触底时触发
  onReachBottom: function() {
    console.log('用户上拉触底了')
    
    // 加载更多数据
    this.loadMoreData()
  },
  
  // 8. 用户点击右上角分享时触发
  onShareAppMessage: function() {
    return {
      title: '分享标题',
      path: '/pages/detail/detail?id=123',
      imageUrl: '/images/share.jpg'
    }
  },
  
  // 自定义方法
  fetchProductDetail: function(id) {
    this.setData({ loading: true })
    
    wx.request({
      url: `https://api.example.com/products/${id}`,
      success: (res) => {
        this.setData({
          product: res.data,
          loading: false
        })
      }
    })
  }
})

页面生命周期执行顺序：

打开新页面：
onLoad → onShow → onReady

从A页面navigateTo到B页面：
A.onHide → B.onLoad → B.onShow → B.onReady

从B页面navigateBack到A页面：
B.onUnload → A.onShow

切到后台：
onHide

从后台切回：
onShow

实际应用场景：

// 一个完整的数据加载页面示例
Page({
  data: {
    list: [],
    page: 1,
    hasMore: true,
    loading: false
  },
  
  onLoad: function(options) {
    this.loadData(1)
  },
  
  onShow: function() {
    // 每次显示时检查是否需要刷新（比如从编辑页返回）
    if (this.data.needRefresh) {
      this.loadData(1)
      this.setData({ needRefresh: false })
    }
  },
  
  onUnload: function() {
    // 清理工作
    if (this.requestTask) {
      this.requestTask.abort()
    }
  },
  
  onPullDownRefresh: function() {
    this.loadData(1).then(() => {
      wx.stopPullDownRefresh()
    })
  },
  
  onReachBottom: function() {
    if (this.data.hasMore && !this.data.loading) {
      this.loadData(this.data.page + 1)
    }
  },
  
  loadData: function(page) {
    if (this.data.loading) return Promise.resolve()
    
    this.setData({ loading: true })
    
    return new Promise((resolve) => {
      this.requestTask = wx.request({
        url: 'https://api.example.com/list',
        data: { page },
        success: (res) => {
          const newList = page === 1 ? res.data.list : this.data.list.concat(res.data.list)
          
          this.setData({
            list: newList,
            page: page,
            hasMore: res.data.hasMore,
            loading: false
          })
          
          resolve()
        }
      })
    })
  }
})