1. 创建UniApp项目，并创建`index`页面和`detail`页面。 2. 在`index`页面中，使用`onLoad`生命周期钩子函数获取学生列表数据，并在页面中展示。 3. 在`index`页面中，使用`onShow`生命周期钩子函数更新页面标题。 4. 在`index`页面中，实现点击学生项跳转到`detail`页面，并传递学生ID。 5. 在`detail`页面中，使用`onLoad`生命周期钩子函数接收学生ID，并获取学生详细信息。 6. 在`detail`页面中，使用`onHide`和`onUnload`生命周期钩子函数打印日志信息。

<think>嗯，用户想知道在UniApp项目中怎么创建页面并使用生命周期钩子函数来实现特定功能，特别是index页面加载学生列表、更新标题，点击跳转到detail页面传参数，然后detail页面接收参数显示详情和打印日志。首先，我需要回顾一下UniApp的生命周期函数，比如onLoad、onShow、onHide、onUnload这些。 根据用户提供的引用内容，onLoad在页面加载时触发，只执行一次，适合用来初始化数据和接收参数。onShow在页面显示时触发，每次页面显示都会调用，可以用来刷新数据。onHide是页面隐藏时触发，比如跳转到其他页面的时候，而onUnload是页面卸载时触发，当页面被关闭或销毁时执行。 接下来，用户的需求是index页面加载学生列表。这时候应该在index页面的onLoad或者onShow里发起请求获取数据。但根据引用[3]，如果页面被缓存了，再次进入不会触发onLoad，所以可能需要用onShow来确保数据刷新。不过第一次加载肯定是在onLoad里获取数据，然后onShow可能用于后续的显示刷新。不过用户的需求里可能只需要在初次加载获取学生列表，所以可能在onLoad里调用获取数据的方法。 然后更新标题，UniApp里页面的标题可以通过配置文件pages.json设置，或者动态修改。如果动态修改，可能需要使用uni.setNavigationBarTitle方法，这个可以在onReady或者onShow里设置，但要注意可能需要异步处理。 点击跳转到detail页面并传递参数，这涉及到页面导航，使用uni.navigateTo方法，并在URL中添加参数。detail页面需要在onLoad里接收参数，根据引用[1]，onLoad的参数就是传递过来的数据。然后根据参数获取详情信息，并显示。 接收参数显示详情的话，detail页面的onLoad里可以通过options对象拿到参数，然后可能发起请求获取详情数据，或者直接显示参数里的内容。打印日志的话，在生命周期函数里用console.log输出相应的信息，比如在onLoad、onShow、onHide、onUnload里添加日志。 需要考虑的是，index页面跳转到detail页面后，返回时index页面是否会刷新数据。根据引用[3]，如果页面被缓存了，返回时不会触发onLoad，但会触发onShow。所以如果希望每次显示index页面都刷新数据，应该在onShow里调用获取学生列表的方法，而不是只在onLoad里。但用户的需求是“加载学生列表”，可能初次加载即可，所以可能在onLoad里获取，但如果需要每次显示都刷新，就需要在onShow里处理。需要看用户的具体需求，但根据问题描述，可能只需要在onLoad里加载一次。 另外，传递参数时，uni.navigateTo的url需要拼接参数，比如`/pages/detail/detail?id=${id}`，然后在detail页面的onLoad里通过options.id获取。 关于更新标题，比如index页面的标题可能在onReady里设置，或者直接在pages.json里配置。如果动态更新，比如根据数据来改标题，就需要在获取数据后调用uni.setNavigationBarTitle。 然后，代码示例部分，需要展示index页面的生命周期函数，data中的学生列表和标题，methods里的跳转方法，以及detail页面的onLoad接收参数，设置数据，并打印日志。 可能还需要注意异步请求的问题，比如在onLoad里发起请求获取学生列表，可能需要使用async/await或者.then来处理。不过示例代码可能需要简化，使用setTimeout模拟异步请求。 总结步骤： 1. 创建index页面，在onLoad中加载学生列表数据和更新标题。 2. 使用uni.setNavigationBarTitle来动态修改标题。 3. 在index页面的模板中渲染学生列表，并绑定点击事件跳转到detail页面，传递学生id。 4. 创建detail页面，在onLoad中接收参数，获取学生id，并打印日志。 5. detail页面在onShow、onHide、onUnload时也打印日志，方便调试。 6. 在detail页面的模板中显示接收到的学生详情信息。 需要检查生命周期函数的执行顺序，比如index页面的onLoad、onShow、onReady，当跳转到detail页面时，index的onHide触发，detail的onLoad、onShow触发。返回时，detail的onUnload触发，index的onShow触发。 可能还需要注意，uni.navigateTo会保留当前页面，跳转到新页面，所以index页面会被隐藏，触发onHide，而detail页面返回时，index页面会显示，触发onShow。如果使用uni.redirectTo，则会关闭当前页面，触发onUnload。 在示例代码中，应该用navigateTo，这样index页面会被保留在栈中，返回时触发onShow。所以用户的需求中，index页面在返回时是否需要刷新数据？如果用户在detail页面进行了操作，希望index页面在返回时更新数据，那么应该在index的onShow里重新加载数据。但根据用户的问题描述，可能只需要在初次加载时获取数据，所以放在onLoad里即可。 另外，传递参数时，detail页面的onLoad接收到的参数需要解析出来，比如在options里，可能有id，然后根据这个id去获取详情数据，可能是模拟的数据或者从服务器获取。 最后，代码部分需要展示中文字符，比如标题、学生姓名等，同时注意生命周期函数的使用顺序和正确性。</think>### 分步实现 UniApp 页面生命周期功能 #### 一、创建页面文件 1. `pages/index/index.vue`：首页 2. `pages/detail/detail.vue`：详情页 #### 二、index 页面逻辑 ```javascript // pages/index/index.vue export default { data() { return { studentList: [], // 学生列表 pageTitle: "首页" }; }, onLoad() { // 页面初始化时执行一次 this.loadStudentList(); uni.setNavigationBarTitle({ title: this.pageTitle }); // 更新标题 console.log("index页面加载完成"); }, onShow() { // 页面显示时触发 console.log("index页面显示"); }, onHide() { // 页面隐藏时触发 console.log("index页面隐藏"); }, onUnload() { // 页面卸载时触发 console.log("index页面销毁"); }, methods: { async loadStudentList() { // 模拟数据加载 // 实际项目中使用 uni.request 替换 setTimeout(() => { this.studentList = [ { id: 1, name: "张三" }, { id: 2, name: "李四" } ]; }, 500); }, navigateToDetail(studentId) { // 跳转详情页 uni.navigateTo({ url: `/pages/detail/detail?id=${studentId}` }); } } }; ``` #### 三、detail 页面逻辑 ```javascript // pages/detail/detail.vue export default { data() { return { studentDetail: null }; }, onLoad(options) { // 接收参数 const studentId = options.id; this.loadStudentDetail(studentId); console.log("detail页面加载完成，参数:", options); }, onShow() { console.log("detail页面显示"); }, onHide() { console.log("detail页面隐藏"); }, onUnload() { console.log("detail页面销毁"); }, methods: { async loadStudentDetail(id) { // 模拟详情加载 // 实际项目中替换为真实接口 setTimeout(() => { this.studentDetail = { id: id, name: `学生${id}`, score: Math.floor(Math.random() * 100) }; }, 300); } } }; ``` #### 四、模板示例（index页面） ```html <!-- pages/index/index.vue --> <template> <view> <view v-for="item in studentList" :key="item.id" @click="navigateToDetail(item.id)"> {{ item.name }} </view> </view> </template> ``` #### 五、模板示例（detail页面） ```html <!-- pages/detail/detail.vue --> <template> <view> <view v-if="studentDetail"> 姓名：{{ studentDetail.name }} 成绩：{{ studentDetail.score }} </view> </view> </template> ``` ### 生命周期执行顺序 1. **首次进入 index 页面** `index.onLoad` → `index.onShow` → `index.onReady` 2. **跳转到 detail 页面** `index.onHide` → `detail.onLoad` → `detail.onShow` 3. **返回 index 页面** `detail.onUnload` → `index.onShow` 4. **关闭页面栈** 触发 `onUnload` 事件[^1][^3] ### 关键点总结 - **参数传递**：通过 `uni.navigateTo` 的 URL 参数传递数据，在目标页面 `onLoad` 中通过 `options` 接收 - **数据刷新**：若需要返回时刷新列表，可将 `loadStudentList` 移到 `onShow` - **导航栏控制**：使用 `uni.setNavigationBarTitle` 动态修改标题