进阶实战：微信小程序路由、交互与生命周期全攻略DAY03

之前我们掌握了小程序的模板语法、样式配置与网络请求，现在要让小程序真正 "跑起来"------ 这就需要学习页面跳转、交互反馈和生命周期。这三个能力是构建完整用户流程的核心，直接决定小程序的体验流畅度。下面我们逐一拆解核心知识点。

一、页面导航跳转：声明式 + 编程式，两种方式任选

小程序页面跳转分声明式导航（组件标签）和编程式导航（JS 代码调用），覆盖不同业务场景。

1. 声明式导航：组件标签，简单直观

通过<navigator>组件实现跳转，无需写 JS，适合简单页面跳转。
基础用法（跳转普通页面）

wxml 复制代码

<!-- 跳转至详情页（默认保留当前页面，点击后可返回） -->
<navigator url="/pages/detail/detail">跳转到详情页</navigator>

<!-- 跳转至tabBar页面（必须指定open-type="switchTab"） -->
<navigator url="/pages/home/home" open-type="switchTab">跳转到首页</navigator>

核心属性

url：跳转目标页面路径，需以 / 开头
open-type：跳转方式，常用值：
- navigate：保留当前页，可返回（默认）
- redirect：关闭当前页，再跳转（无法返回原页）
- switchTab：跳转 tabBar 页面，必须配合 tabBar 配置
- reLaunch：重启小程序，关闭所有页面
- navigateBack：返回上一页（需配合 delta 属性指定返回层数）

2. 编程式导航：JS 控制，灵活可控

通过 wx.navigateTo 等 API 实现跳转，适合结合业务逻辑（如请求成功后跳转）的场景。
常用 API 示例

js 复制代码

// 1. 保留当前页跳转（最常用，对应navigate）
wx.navigateTo({
  url: '/pages/detail/detail?id=123&title=小程序教程' // 可带参数
})

// 2. 关闭当前页跳转（无法返回）
wx.redirectTo({
  url: '/pages/login/login'
})

// 3. 跳转tabBar页面（必须用switchTab）
wx.switchTab({
  url: '/pages/home/home'
})

// 4. 返回上一页（delta=1返回上一层，delta=2返回上两层）
wx.navigateBack({
  delta: 1
})

页面传参技巧

跳转时通过 url 拼接参数（?key=value），目标页通过 onLoad 生命周期接收参数：

js 复制代码

// 详情页.js
Page({
  onLoad(options) {
    console.log('接收的参数：', options); // {id: "123", title: "小程序教程"}
  }
})

二、下拉刷新：让页面 "一键更新" 数据

下拉刷新是小程序常见交互，用于更新页面最新数据，核心配置 + 事件处理两步搞定。

1. 全局开启（app.json）

在 app.json 的 window 中配置，所有页面生效：

json 复制代码

"window": {
  "enablePullDownRefresh": true, // 开启下拉刷新
  "backgroundTextStyle": "dark", // 刷新loading样式（仅支持dark/light）
  "backgroundColor": "#f5f5f5" // 下拉背景色
}

2. 单个页面开启（page.json）

遵循就近原则，在目标页的 .json 中配置，仅当前页生效：

json 复制代码

{
  "enablePullDownRefresh": true,
  "backgroundTextStyle": "light"
}

3. 实现刷新逻辑（page.js）

通过 onPullDownRefresh 事件监听下拉动作，编写刷新逻辑，完成后停止刷新动画：

js 复制代码

Page({
  data: {
    list: []
  },
  // 下拉刷新触发的事件
  onPullDownRefresh() {
    console.log('下拉刷新中...');
    // 模拟请求最新数据
    this.getLatestData(() => {
      // 数据请求完成后，停止刷新动画（必须调用，否则一直转）
      wx.stopPullDownRefresh()
    })
  },
  
  getLatestData(callback) {
    // 实际项目中替换为wx.request请求
    setTimeout(() => {
      this.setData({
        list: [1,2,3] // 最新数据
      })
      callback && callback()
    }, 1000)
  }
})

三、上拉加载更多：实现分页数据加载

上拉加载更多用于分页加载数据，避免一次性加载所有内容，核心是 onReachBottom 事件 + 距离配置。

1. 配置触发距离（可选）

在 app.json 或页面 .json 中配置 onReachBottomDistance，默认距离底部 50px 触发：

json 复制代码

"window": {
  "onReachBottomDistance": 100 // 距离底部100px时触发上拉加载
}

2. 实现加载逻辑（page.js）

通过 onReachBottom 事件监听上拉动作，分页请求数据：

js 复制代码

Page({
  data: {
    list: [],
    page: 1, // 当前页码
    pageSize: 10 // 每页条数
  },
  
  // 上拉加载触发的事件
  onReachBottom() {
    console.log('上拉加载更多...');
    this.data.page++
    this.loadMoreData()
  },
  
  loadMoreData() {
    // 模拟分页请求
    wx.request({
      url: 'https://api.example.com/list',
      data: {
        page: this.data.page,
        pageSize: this.data.pageSize
      },
      success: (res) => {
        // 拼接新数据
        this.setData({
          list: [...this.data.list, ...res.data.list]
        })
      }
    })
  }
})

四、小程序生命周期：掌握运行节奏，优化性能

生命周期是小程序 / 页面从创建到销毁的全过程，掌握它能精准控制逻辑执行时机，分应用生命周期和页面生命周期两类。

1. 应用生命周期（app.js）

控制整个小程序的运行状态，仅在 app.js 中生效：

js 复制代码

App({
  // 小程序初始化完成时触发（全局只触发一次）
  onLaunch() {
    console.log('小程序初始化');
    // 初始化全局数据、登录请求等
  },
  
  // 小程序显示到前台（如从后台切回）时触发
  onShow() {
    console.log('小程序显示');
  },
  
  // 小程序进入后台（如点击home键切到桌面）时触发
  onHide() {
    console.log('小程序隐藏');
  }
})

2. 页面生命周期（page.js）

控制单个页面的运行状态，每个页面独立生效，执行顺序：onLoad → onShow → onReady → onShow（重复进入） → onHide → onUnload

js 复制代码

Page({
  // 页面加载时触发（初始化数据、接收参数，只执行一次）
  onLoad(options) {
    console.log('页面加载', options);
  },
  
  // 页面显示时触发（每次打开/切换到该页面都执行）
  onShow() {
    console.log('页面显示');
  },
  
  // 页面渲染完成后触发（DOM生成，可获取节点，只执行一次）
  onReady() {
    console.log('页面渲染完成');
  },
  
  // 页面隐藏时触发（如跳转其他页面、切到后台）
  onHide() {
    console.log('页面隐藏');
  },
  
  // 页面销毁时触发（如navigateBack返回上一页，页面被销毁）
  onUnload() {
    console.log('页面销毁');
  }
})

生命周期使用技巧

网络请求：放在 onLoad 中（页面加载时请求，避免重复请求）
节点操作：放在 onReady 中（确保 DOM 渲染完成）
页面销毁清理：在 onUnload 中清除定时器、订阅事件，防止内存泄漏