微信小程序开发【从0到1~入门篇3】

这篇文章的主题是视图与逻辑，分为以下几个部分学习： 页面导航，页面事件，生命周期，WXS脚本，案例（本地生活列表页面）

如果您没阅读前一篇文章，建议您返回阅读：微信小程序开发入门到实战【从0到1~入门篇2】

小程序框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

您将学习以下内容：

① 能够知道如何实现页面之间的导航跳转
⚫ 声明式导航、编程式导航

② 能够知道如何实现下拉刷新效果
⚫ enablePullDownRefresh、onPullDownRefresh

③ 能够知道如何实现上拉加载更多效果
⚫ onReachBottomDistance、onReachBottom

④ 能够知道小程序中常用的生命周期函数
⚫ 应用生命周期函数：onLaunch, onShow, onHide
⚫ 页面生命周期函数：onLoad, onShow, onReady, onHide, onUnload

1、页面导航

页面导航指的是页面之间的相互跳转。例如，浏览器中实现页面导航的方式有如下两种：
① 链接
② location.href

小程序中实现页面导航的两种方式
① 声明式导航

• 在页面上声明一个 导航组件
• 通过点击 组件实现页面跳转
  ② 编程式导航
• 调用小程序的导航 API，实现页面的跳转

1.1 声明式导航

1.1.2 导航到 tabBar 页面

tabBar 页面指的是被配置为 tabBar 的页面。
在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：

• url 表示要跳转的页面的地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 switchTab
  示例代码如下:

<text>pages/home/home.wxml</text>

<navigator url="/pages/message/message" open-type="switchTab">导航到消息页面</navigator>

message页面为tabBar页面

点击之后则跳转到了消息页面：

页面目录结构，info为普通页面

1.1.3 导航到非 tabBar 页面

非 tabBar 页面指的是没有被配置为 tabBar 的页面。
在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：

• url 表示要跳转的页面的地址，必须以 / 开头
• open-type 表示跳转的方式，必须为 navigate
  示例代码如下：

<navigator url="/pages/info/info" open-type="navigate">导航到info页面</navigator>

注意：为了简便，在导航到非 tabBar 页面时，open-type=“navigate” 属性可以省略。
点击后跳转到了info页面

1.1.4 后退导航

如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：

• open-type 的值必须是 navigateBack，表示要进行后退导航
• delta 的值必须是数字，表示要后退的层级
  示例代码如下：

<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>

注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。

1.2编程式导航

//home.wxml
<button bindtap="gotoMessage">跳转到message页面</button>

//home.js
  // 通过编程式导航跳转到 tabBar 页面
  gotoMessage() {
    
    
    wx.switchTab({
    
    
      url: '/pages/message/message'
    })
  },

点击前：

点击后：

<button bindtap="gotoInfo">跳转到info页面</button>

  gotoInfo() {
    
    
    wx.navigateTo({
    
    
      url: '/pages/info/info'
    })
  },

1.3导航传参

微信小程序中，页面导航传参是指在不同页面之间跳转时传递数据的过程。

1.3.1声明式导航传参

navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
⚫ 参数与路径之间使用 ? 分隔
⚫ 参数键与参数值用 = 相连
⚫ 不同参数用 & 分隔
代码示例如下：

<navigator url="/pages/info/info?name=zs&age=20">跳转到info页面</navigator>

1.3.2编程式导航传参

调用 wx.navigateTo(Object object) 方法跳转页面时，也可以携带参数，代码示例如下：

<button bindtap="gotoInfo2">跳转到info页面</button>

  gotoInfo2() {
    
    
    wx.navigateTo({
    
    
      url: '/pages/info/info?name=ls&gender=男'
    })
  },

1.3.3在 onLoad 中接收导航参数

通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
console.log(options)
  },

刚开始Console没有内容输出

点击跳转页面后Console输出所传递的参数

2、页面事件

在微信小程序开发中，页面事件指的是与页面生命周期相关的一系列事件处理函数，它们在页面加载、显示、隐藏等不同阶段被触发。以下是一些主要的页面事件及其用途：

2.1下拉刷新事件

下拉刷新是移动端的专有名词，指的是通过手指在屏幕上的下拉滑动操作，从而重新加载页面数据的行为。

启用下拉刷新有两种方式：
① 全局开启下拉刷新

• 在 app.json 的 window 节点中，将 enablePullDownRefresh 设置为 true

② 局部开启下拉刷新

• 在页面的 .json 配置文件中，将 enablePullDownRefresh 设置为 true
  在实际开发中，推荐使用第 2 种方式，为需要的页面单独开启下拉刷新的效果。

配置下拉刷新窗口的样式
在全局或页面的 .json 配置文件中，通过backgroundColor 和 backgroundTextStyle 来配置下拉刷新窗口的样式，其中：

• backgroundColor 用来配置下拉刷新窗口的背景颜色，仅支持16 进制的颜色值
• backgroundTextStyle 用来配置下拉刷新 loading 的样式，仅支持 dark 和 light

监听页面的下拉刷新事件

在页面的 .js 文件中，通过 onPullDownRefresh() 函数即可监听当前页面的下拉刷新事件。

例如，在页面的 wxml 中有如下的 UI 结构，点击按钮可以让 count 值自增 +1：

<view>count值是：{
    
    {
    
    count}}</view>
<button bindtap="addCount">+1</button>

  data: {
    
    
    count: 0,
    username: 'zs',
    country: 'CHINA'
  },

  addCount() {
    
    
    this.setData({
    
    
      count: this.data.count + 1
    })
  },
    /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
    
    // console.log('触发了message页面的下拉刷新')
    this.setData({
    
    
      count: 0
    })
  },

点击后count的值变为2

下拉刷新后值重新变为0

当处理完下拉刷新后，下拉刷新的 loading 效果会一直显示，不会主动消失，所以需要手动隐藏下拉刷新的loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新。示例代码如下：

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
    
    // console.log('触发了message页面的下拉刷新')
    this.setData({
    
    
      count: 0
    })
    wx.stopPullDownRefresh()
  },

2.2上拉触底事件

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

在页面的 .js 文件中，通过 onReachBottom() 函数即可监听当前页面的上拉触底事件。示例代码如下：

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    
console.log("小猿触发了上拉触底事件")
  },

配置上拉触底距离

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离。

可以在全局或页面的 .json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离。

小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值

案例的实现步骤：

① 定义获取随机颜色的方法

Page({
    
    

  /**
   * 页面的初始数据
   */
  data: {
    
    
    colorList: []
  },

  getColors() {
    
    
    // 需要展示 loading 效果
    wx.showLoading({
    
    
      title: '数据加载中...'
    })
    wx.request({
    
    
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method: 'get',
      success: ({
    
     data: res }) => {
    
    
        this.setData({
    
    
          colorList: [...this.data.colorList, ...res.data]
        })
      }
    })
  },

② 在页面加载时获取初始数据

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.getColors()
  },

③ 渲染 UI 结构并美化页面效果

<view wx:for="{
    
    {colorList}}" wx:key="index" class="num-item" style="background-color: rgba({
    
    {item}});">{
    
    {
    
    item}}</view>

/* pages/contact/contact.wxss */
.num-item {
    
    
  border: 1rpx solid #efefef;
  border-radius: 8rpx;
  line-height: 200rpx;
  margin: 15rpx;
  text-align: center;
  text-shadow: 0rpx 0rpx 5rpx #fff;
  box-shadow: 1rpx 1rpx 6rpx #aaa;
  color: black;
}

④ 在上拉触底时调用获取随机颜色的方法

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    

    this.getColors()
  },

⑤ 添加 loading 提示效果

  getColors() {
    
    
    // 需要展示 loading 效果
    wx.showLoading({
    
    
      title: '数据加载中...'
    })
    wx.request({
    
    
      url: 'https://applet-base-api-t.itheima.net/api/color',
      method: 'get',
      success: ({
    
     data: res }) => {
    
    
        this.setData({
    
    
          colorList: [...this.data.colorList, ...res.data]
        })
      },
      complete: () => {
    
    
        wx.hideLoading() //隐藏loading效果
      }
    })
  },

⑥ 对上拉触底进行节流处理

在微信小程序开发中，对上拉触底（onReachBottom事件）进行节流处理是出于以下几个原因：

1. 防止频繁触发
   用户在滚动页面到底部时可能会快速多次触发上拉触底事件，如果没有节流处理，可能会导致多次加载相同的数据，增加不必要的网络请求和服务器的负担。

2. 提升用户体验
   如果用户每次轻微上拉都会触发加载，那么用户体验会非常糟糕。通过节流，可以确保在一定时间内只触发一次加载，让用户有更好的使用体验。

3. 节省资源
   频繁的网络请求会消耗大量的数据流量和CPU资源，对用户的设备性能和网络状况都是一种负担。节流可以减少这些不必要的消耗。

4. 避免错误
   在短时间内频繁触发事件可能会导致代码执行错误，比如重复发送网络请求，可能会导致服务器响应错误或者小程序崩溃。

5. 控制加载节奏
   有些时候，数据加载是需要一定时间间隔的，比如等待服务器生成新的数据。节流可以控制加载的节奏，避免在数据尚未准备好时进行加载。

步骤：

在 data 中定义 isloading 节流阀

⚫ false 表示当前没有进行任何数据请求
⚫ true 表示当前正在进行数据请求

  data: {
    
    
    colorList: [],
    isloding: false
  },

在 getColors() 方法中修改 isloading 节流阀的值

⚫ 在刚调用 getColors 时将节流阀设置 true
⚫ 在网络请求的 complete 回调函数中，将节流阀重置为 false

    this.setData({
    
    
      isloding: true
    })

在 onReachBottom 中判断节流阀的值，从而对数据请求进行节流控制

⚫ 如果节流阀的值为 true，则阻止当前请求
⚫ 如果节流阀的值为 false，则发起数据请求

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    
    if (this.data.isloding) return

    this.getColors()
  },

3.生命周期

生命周期（Life Cycle）是指一个对象从创建 -> 运行 -> 销毁的整个阶段，强调的是一个时间段。例如：

• 张三出生，表示这个人生命周期的开始
• 张三离世，表示这个人生命周期的结束
• 中间张三的一生，就是张三的生命周期

我们可以把每个小程序运行的过程，也概括为生命周期：

• 小程序的启动，表示生命周期的开始
• 小程序的关闭，表示生命周期的结束
• 中间小程序运行的过程，就是小程序的生命周期

在小程序中，生命周期分为两类，分别是：

① 应用生命周期

• 特指小程序从启动 -> 运行 -> 销毁的过程

② 页面生命周期

• 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程

其中，页面的生命周期范围较小，应用程序的生命周期范围较大，如图所示

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。

生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在onLoad 生命周期函数中初始化页面的数据。

注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

小程序中的生命周期函数分为两类，分别是：
① 应用的生命周期函数

• 特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数
  ② 页面的生命周期函数
• 特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数

小程序的应用生命周期函数需要在 app.js 中进行声明，示例代码如下：

//app.js
App({
    
    

  /**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
    
    // console.log('onLaunch')
  },

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    
    
    // console.log('onShow')
  },

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    
    
    // console.log('onHide')
  },

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    
    
    
  }
})

小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下：

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    
    
    this.getColors()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
    

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
    

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
    

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
    
    if (this.data.isloding) return

    this.getColors()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
    

  }
})

4.WXS脚本

WXS（WeiXin Script）是小程序独有的一套脚本语言，结合 WXML，可以构建出页面的结构。

wxml 中无法调用在页面的 .js 中定义的函数，但是，wxml 中可以调用 wxs 中定义的函数。因此，小程序中
wxs 的典型应用场景就是“过滤器”。

wxs 和 JavaScript 的关系

虽然 wxs 的语法类似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的两种语言：

① wxs 有自己的数据类型

• number 数值类型、string 字符串类型、boolean 布尔类型、object 对象类型、
• function 函数类型、array 数组类型、 date 日期类型、 regexp 正则

② wxs 不支持类似于 ES6 及以上的语法形式

• 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc…
• 支持：var 定义变量、普通 function 函数等类似于 ES5 的语法

③ wxs 遵循 CommonJS 规范
⚫ module 对象
⚫ require() 函数
⚫ module.exports 对象

为了降低 wxs（WeiXin Script）的学习成本， wxs 语言在设计时借大量鉴了 JavaScript 的语法。但是本质上，wxs 和 JavaScript 是完全不同的两种语言！

5、案例-本地生活（列表页面）

列表页面的 API 接口

以分页的形式，加载指定分类下商铺列表的数据：

① 接口地址
⚫ https://applet-base-api-t.itheima.net
/categories/:cate_id/shops
⚫ URL 地址中的 :cate_id 是动态参数，表示分类的 Id

② 请求方式
⚫ GET 请求

③ 请求参数
⚫ _page 表示请求第几页的数据
⚫ _limit 表示每页请求几条数据

判断是否还有下一页数据

如果下面的公式成立，则证明没有下一页数据了：
页码值 * 每页显示多少条数据 >= 总数据条数
page * pageSize >= total

案例1：总共有 77 条数据，如果每页显示 10 条数据，则总共分为 8 页，其中第 8 页只有 7 条数据
page（7）* pageSize（10） >= total（77）
page（8）* pageSize（10） >= total（77）

案例2：总共有 80 条数据，如果每页显示 10 条数据，则总共分为 8 页，其中第 8 页面有 10 条数据
page（7）* pageSize（10） >= total（80）
page（8）* pageSize（10） >= total（80）

课件及源码获取方式：

关注公众号：小猿搜码

后台发送：csdn小程序

即可免费领取