之前我们掌握了小程序的模板语法、样式配置与网络请求，现在要让小程序真正 "跑起来"------ 这就需要学习页面跳转、交互反馈和生命周期。这三个能力是构建完整用户流程的核心，直接决定小程序的体验流畅度。下面我们逐一拆解核心知识点。
一、页面导航跳转：声明式 + 编程式，两种方式任选
小程序页面跳转分声明式导航（组件标签）和编程式导航（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中清除定时器、订阅事件，防止内存泄漏