小程序学习笔记：导航、刷新、加载、生命周期

在小程序开发的领域中，掌握视图与逻辑相关的技能是打造功能完备、用户体验良好应用的关键。今天，咱们就来深入梳理一下小程序视图与逻辑的学习要点，并结合代码示例，让大家有更直观的理解。

一、页面之间的导航跳转

在小程序里实现页面跳转主要有声明式导航和编程式导航这两种方式。

1. 声明式导航：借助 navigator 组件就能轻松实现。假设现在有两个页面，分别是 index 页面和 detail 页面，想要从 index 页面跳转到 detail 页面，代码可以这样写：

<navigator url="/pages/detail/detail" open-type="navigate">跳转到详情页</navigator>

在这段代码里，url 属性指定了要跳转的目标页面路径，open-type 属性设置为 navigate 表示以普通跳转的方式打开新页面。
2. 编程式导航：需要用到微信提供的 API，比如 wx.navigateTo。还是以上面的两个页面为例，在 index 页面的 js 文件里，可以这样编写代码实现跳转：

Page({
  goToDetail: function() {
    wx.navigateTo({
      url: '/pages/detail/detail'
    });
  }
});

然后在 index 页面的 wxml 文件里添加一个按钮来触发这个跳转函数：

<button bindtap="goToDetail">编程式跳转到详情页</button>

二、实现下拉刷新效果

实现下拉刷新分两步走，先开启下拉刷新功能，再监听下拉刷新事件。

1. 开启下拉刷新：在页面的 json 配置文件里，添加 enablePullDownRefresh 属性并将其值设为 true 即可。例如：

{
  "enablePullDownRefresh": true
}

1. 监听下拉刷新事件：在页面的 js 文件里，通过 onPullDownRefresh 函数来监听并处理下拉刷新事件。比如，当用户下拉刷新时，我们从服务器获取最新数据并更新页面：

Page({
  data: {
    list: []
  },
  onPullDownRefresh: function() {
    wx.showLoading({
      title: '加载中...'
    });
    // 模拟从服务器获取数据
    setTimeout(() => {
      const newData = [1, 2, 3];
      this.setData({
        list: newData
      });
      wx.hideLoading();
      wx.stopPullDownRefresh();
    }, 2000);
  }
});

在这段代码里，wx.showLoading 用于显示加载提示，setTimeout 模拟了从服务器获取数据的过程，获取到数据后通过 setData 更新页面数据，最后用 wx.hideLoading 隐藏加载提示，wx.stopPullDownRefresh 停止下拉刷新的动画效果。

三、实现上拉加载更多效果

实现上拉加载更多需要设置一个属性和监听一个事件。

设置上拉处理距离：在页面的 json 配置文件里，添加 onReachBottomDistance 属性来设置上拉触底的距离，单位是 px。例如

{
  "onReachBottomDistance": 50
}

1. 监听上拉触底事件：在页面的 js 文件里，通过 onReachBottom 函数来监听上拉触底事件。当用户上拉页面到底部时，加载更多数据并追加到页面现有数据中：

Page({
  data: {
    list: [1, 2, 3],
    page: 1
  },
  onReachBottom: function() {
    const page = this.data.page + 1;
    wx.showLoading({
      title: '加载中...'
    });
    // 模拟从服务器获取更多数据
    setTimeout(() => {
      const newData = [4, 5, 6];
      const newList = this.data.list.concat(newData);
      this.setData({
        list: newList,
        page: page
      });
      wx.hideLoading();
    }, 2000);
  }
});

在这段代码里，每次上拉触底时，page 变量加 1，然后模拟从服务器获取新数据，通过 concat 方法将新数据追加到现有数据列表中，最后更新页面数据并隐藏加载提示。

四、小程序中常用的生命周期函数

小程序的生命周期函数分为应用的生命周期函数和页面的生命周期函数。

1. 应用的生命周期函数：总共只有三个，分别是 onLaunch、onShow 和 onHide。在 app.js 文件里可以定义这些函数。
   • onLaunch：小程序初始化完成时触发，在这里可以做一些全局的初始化操作，比如获取用户登录态、初始化全局数据等。

App({
  onLaunch: function() {
    wx.getStorage({
      key: 'userInfo',
      success(res) {
        this.globalData.userInfo = res.data;
      }
    });
  },
  globalData: {
    userInfo: null
  }
});

• onShow：小程序启动，或从后台进入前台显示时触发，可以用来更新页面显示状态。
• onHide：小程序从前台进入后台时触发，比如可以在这里暂停一些正在进行的任务。

1. 页面的生命周期函数：一个页面有五个生命周期函数，分别是 onLoad、onShow、onReady、onHide 和 onUnload。
   • onLoad：页面加载时触发，常用来获取页面的初始数据、接收页面传递的参数等。

Page({
  data: {
    id: ''
  },
  onLoad: function(options) {
    this.setData({
      id: options.id
    });
  }
});

• onShow：页面显示 / 切入前台时触发，用于更新页面显示内容。
• onReady：页面初次渲染完成时触发，此时可以操作页面节点，比如设置导航条标题。

Page({
  onReady: function() {
    wx.setNavigationBarTitle({
      title: '当前页面'
    });
  }
});

• onHide：页面隐藏 / 切入后台时触发，可用于暂停页面相关任务。
• onUnload：页面卸载时触发，比如在页面关闭时清理一些定时器、解绑事件等。

通过对上述小程序视图与逻辑学习目标的详细讲解和代码示例，希望大家能对这部分知识有更深入的理解和掌握，在小程序开发的道路上迈出更坚实的步伐