💌 所属专栏：【微信小程序开发教程】
😀 作 者：我是夜阑的狗🐶
🚀 个人简介：一个正在努力学技术的CV工程师，专注基础和实战分享 ，欢迎咨询！
💖 欢迎大家：这里是CSDN，我总结知识的地方，喜欢的话请三连，有问题请私信 😘 😘 😘
文章目录
- 前言
- 一、页面之间的导航跳转
- 二、实现下拉刷新效果
- 三、实现上拉加载更多效果
- 四、小程序中常用的生命周期函数
- 总结
前言
大家好，又见面了，我是夜阑的狗🐶，本文是专栏【微信小程序开发教程】专栏的第31篇文章;
今天开始学习微信小程序的第17天💖💖💖，开启新的征程，记录最美好的时刻🎉，每天进步一点点。
专栏地址：【微信小程序开发教程】， 此专栏是我是夜阑的狗微信小程序开发过程的总结，希望能够加深自己的印象，以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏。
一、页面之间的导航跳转
前面通过栗子学习了页面导航、页面事件和wxs脚本等相关内容，并根据这些完成案例-本地生活列表页面。接下来就来对这些所学内容的进行一个总结吧。话不多说，让我们原文再续，书接上回吧。
回顾前面学习到的内容，首先先学习到的是能够知道如何实现页面之间的导航跳转。主要有两种实现方式：
-
声明式导航
主要由 navigator 组件来实现页面之间的跳转。 -
编程式导航
需要调用小程序的API来进行页面跳转，比如：wx.switchTab(Object object)、wx.navigateTo(Object object)等。
二、实现下拉刷新效果
这里需要掌握的是能够知道如何实现下拉刷新效果，实现步骤可分为两步：
- Step 1、enablePullDownRefresh
通过 enablePullDownRefresh 属性来开启下拉刷新效果， 当在 app.json 中进行设置时是全局开启下拉刷新，而在实际开发过程中，不一定所有页面都要下拉刷新，所以只要在对应页面的 .json 文件里开启即可。
- Step 2、 onPullDownRefresh
onPullDownRefresh 函数是下拉监听函数，可以将刷新内容放在该监听中。注意： 在使用下拉刷新效果的时候，需要调用 wx.stopPullDownRefresh() 隐藏下拉刷新的 loading 效果。
三、实现上拉加载更多效果
通过前面的栗子基本上能够知道如何实现上拉加载更多效果，实现步骤可分为两步：
- Step 1、onReachBottomDistance
通过 onReachBottomDistance 属性可以设置上拉触底的距离。
- Step 2、 onPullDownRefresh
通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。注意： 当连续触底多次，就会引发不必要的问题。所以需要在上拉监听函数做节流处理，如果当前请求正在请求数据，后续发送的请求都应该进行屏蔽。当前没有数据请求的时候，才可以允许发起下一页的请求。
四、小程序中常用的生命周期函数
小程序中的生命周期函数分为两类，分别是：
| 生命周期 | 说明 |
|---|---|
| 应用 | 特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数。 |
| 页面 | 特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数。 |
- 应用
小程序的应用生命周期函数需要在 app.js 中进行声明。
| 函数 | 说明 |
|---|---|
| onLaunch | 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。参数也可以使用 wx.getLaunchOptionsSync 获取。 |
| onShow | 当小程序启动，或从后台进入前台显示，会触发 onShow。也可以使用 wx.onAppShow 绑定监听。 |
| onHide | 当小程序从前台进入后台，会触发 onHide。也可以使用 wx.onAppHide 绑定监听。 |
| onError | 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息。也可以使用 wx.onError 绑定监听。 |
在实际开发过程中，可以在 onLaunch 函数中对小程序中的数据进行初始化，比如读取本地存储里面的数据加载到小程序中。
- 页面
小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，执行顺序也是从上到下，总共有五个：
| 函数 | 说明 |
|---|---|
| onLoad | 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。 |
| onShow | 页面显示/切入前台时触发。 |
| onReady | 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。 |
| onHide | 页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。 |
| onUnload | 页面卸载时触发。如 wx.redirectTo 或 wx.navigateBack 到其他页面时。 |
注意：对界面内容进行设置的 API 如 wx.setNavigationBarTitle ，请在onReady之后进行。在开发过程中，页面数据的初始化 一般都会在 onLoad 里进行处理。
总结
感谢观看，这里就是关于页面处理的总结，如果觉得有帮助，请给文章点个赞吧，让更多的人看到。🌹 🌹 🌹
也欢迎你，关注我。👍 👍 👍
原创不易，还希望各位大佬支持一下，你们的点赞、收藏和留言对我真的很重要！！！💕 💕 💕 最后，本文仍有许多不足之处，欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正！下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解（持续更新中）】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记（华为云）】
- 🦄 【程序错误解决方法（建议收藏）】
- 🚀 【软件安装教程】
订阅更多，你们将会看到更多的优质内容！！
