【微信小程序前端开发】入门Day03 —— 页面导航、事件、生命周期、WXS 脚本及自定义组件

1. 页面导航

• 导航方式

  • 声明式导航：使用组件实现页面跳转。

    
    导航到消息页面
    
    
    导航到info页面
    
    
    返回上一页

    • 跳转到tabBar页面：需指定url属性（以/开头）和open-type="switchTab"。
    • 跳转到非tabBar页面：指定url属性（以/开头），open-type="navigate"（可省略）。
    • 后退导航：指定open-type="navigateBack"和delta属性（后退层级，可省略）。

  • 编程式导航：调用小程序的导航 API 实现页面跳转。

    // 导航到tabBar页面
    Page({
      gotoMessage() {
        wx.switchTab({
          url: '/pages/message/message'
        })
      }
    })
    
    // 导航到非tabBar页面
    Page({
      gotoInfo() {
        wx.navigateTo({
          url: '/pages/info/info'
        })
      }
    })
    
    // 后退导航
    Page({
      gotoBack() {
        wx.navigateBack()
      }
    })

    • 跳转到tabBar页面：调用wx.switchTab方法，传入包含url等属性的对象。
    • 跳转到非tabBar页面：调用wx.navigateTo方法，传入包含url等属性的对象。
    • 后退导航：调用wx.navigateBack方法，可传入delta属性。

• 导航传参

  • 声明式导航传参：navigator组件的url属性后面携带参数，格式为?参数键=参数值&参数键=参数值。

    
    跳转到info页面

  • 编程式导航传参：调用wx.navigateTo方法跳转页面时，url属性中携带参数。

    // 编程式导航传参
    Page({
      gotoInfo2() {
        wx.navigateTo({
          url: '/pages/info/info?name=ls&gender=男'
        })
      }
    })

  • 在onLoad中接收导航参数：通过options对象获取传递过来的参数。

    // 在onLoad中接收导航参数
    Page({
      onLoad: function (options) {
        console.log(options)
      }
    })

2. 页面事件

• 下拉刷新事件

  // 全局开启下拉刷新（app.json示例）
  {
    "window": {
      "enablePullDownRefresh": true
    }
  }
  
  // 局部开启下拉刷新（页面.json示例）
  {
    "enablePullDownRefresh": true
  }
  
  // 配置下拉刷新窗口的样式（页面.json示例）
  {
    "backgroundColor": "#ffffff",
    "backgroundTextStyle": "dark"
  }
  
  // 监听页面的下拉刷新事件
  Page({
    data: {
      count: 0
    },
    onPullDownRefresh: function () {
      this.setData({
        count: 0
      })
      wx.stopPullDownRefresh()
    },
    countAdd() {
      this.setData({
        count: this.data.count + 1
      })
    }
  })

  • 启用下拉刷新

    • 全局开启：在app.json的window节点中，将enablePullDownRefresh设置为true。
    • 局部开启：在页面的.json配置文件中，将enablePullDownRefresh设置为true（推荐）。
  • 配置下拉刷新窗口的样式：通过backgroundColor（16 进制颜色值）和backgroundTextStyle（dark或light）配置。
  • 监听页面的下拉刷新事件：在页面的.js文件中，通过onPullDownRefresh函数监听，可重置数据并手动停止下拉刷新（wx.stopPullDownRefresh）。

• 上拉触底事件

  // 监听页面的上拉触底事件
  Page({
    onReachBottom: function () {
      console.log("触发了上拉触底的事件")
    }
  })
  
  // 配置上拉触底距离（页面.json示例）
  {
    "onReachBottomDistance": 80
  }

  • 监听页面的上拉触底事件：在页面的.js文件中，通过onReachBottom函数监听。
  • 配置上拉触底距离：在全局或页面的.json配置文件中，通过onReachBottomDistance属性配置，默认50px。
  • 上拉触底案例

    // 上拉触底案例
    Page({
      data: {
        colorList: []
      },
      onLoad: function (options) {
        this.getColors()
      },
      onReachBottom: function () {
        this.getColors()
      },
      getColors() {
        wx.showLoading({
          title: "数据加载中..."
        })
        wx.request({
          url: 'https://www.escook.cn/api/color',
          method: 'GET',
          success: ({ data: res }) => {
            this.setData({
              colorList: [...this.data.colorList,...res.data]
            })
          },
          complete: () => {
            wx.hideLoading()
          }
        })
      }
    })

    • 案例效果展示：加载随机颜色数据，上拉触底加载更多。
    • 实现步骤：定义获取随机颜色方法、页面加载时获取初始数据、渲染 UI 结构、上拉触底时调用方法、添加loading提示效果、对上拉触底进行节流处理。

3. 生命周期

• 生命周期概念：指一个对象从创建到运行再到销毁的整个阶段。小程序的生命周期包括应用生命周期（启动到关闭）和页面生命周期（加载到卸载）。
• 生命周期函数：由小程序框架提供的内置函数，伴随生命周期自动按次序执行。
  • 应用的生命周期函数：在app.js中声明，包括onLaunch（初始化完成时触发）、onShow（启动或从后台进入前台显示时触发）、onHide（从前台进入后台时触发）。

    App({
      onLaunch: function (options) {
        // 小程序初始化完成时，可做一些初始化工作
      },
      onShow: function (options) {
        // 小程序启动，或从后台进入前台显示时触发
      },
      onHide: function () {
        // 小程序从前台进入后台时触发
      }
    })

  • 页面的生命周期函数：在页面的.js文件中声明，包括onLoad（监听页面加载，只调用 1 次）、onShow（监听页面显示）、onReady（监听页面初次渲染完成，只调用 1 次）、onHide（监听页面隐藏）、onUnload（监听页面卸载，只调用 1 次）。

    Page({
      onLoad: function (options) {
        // 监听页面加载，一个页面只调用1次
      },
      onShow: function () {
        // 监听页面显示
      },
      onReady: function () {
        // 监听页面初次渲染完成，一个页面只调用1次
      },
      onHide: function () {
        // 监听页面隐藏
      },
      onUnload: function () {
        // 监听页面卸载，一个页面只调用1次
      }
    })

4. WXS 脚本

• 概述

  • 定义：小程序独有的一套脚本语言，结合WXML构建页面结构。
  • 应用场景：典型应用场景是 “过滤器”，因为wxml中无法调用页面.js中定义的函数，但可调用wxs中定义的函数。
  • 与 JavaScript 的关系
    • 有自己的数据类型。
    • 不支持类似于ES6及以上的语法形式，支持类似于ES5的语法。
    • 遵循CommonJS规范。

• 基础语法

  • 内嵌 wxs 脚本：编写在wxml文件中的标签内，需提供module属性。

    {m1.toUpper(username)}
    
      // 将文本转为大写形式zs->ZS
      module.exports.toUpper = function(str) {
        return str.toUpperCase()
      }
    

  • 定义外联的 wxs 脚本：编写在以.wxs为后缀名的文件内。

    // tools.wxs文件
    function toLower(str) {
      return str.toLowerCase()
    }
    module.exports = {
      toLower: toLower
    }

  • 使用外联的 wxs 脚本：在wxml中引入时，需为标签添加module和src属性。

    {m2.toLower(country)}
    

• WXS 的特点

  • 与JavaScript不同：语法相似但本质不同。
  • 不能作为组件的事件回调。
  • 隔离性：运行环境与其他JavaScript代码隔离。
  • 性能好：在iOS设备上比JavaScript代码快。

5. 自定义组件

组件的创建与引用

• 创建组件：在项目根目录创建components文件夹，在其中创建组件文件夹，右键点击 “新建 Component” 并输入组件名称，会自动生成.js、.json、.wxml和.wxss四个文件。
• test.js

  Component({
    // 组件逻辑代码
  })

• test.json

  {
    "component": true
  }

• test.wxml

  这是一个自定义组件

• test.wxss

  view {
    color: red;
  }

• 引用组件
  • 局部引用：在页面的.json配置文件中引用，如{"usingComponents": {"my-test1": "/components/test1/test1"}}，在页面的.wxml文件中使用。

    {
      "usingComponents": {
        "my-test": "/components/test1/test1"
      }
    }

  • 全局引用：在app.json全局配置文件中引用，如{"usingComponents": {"my-test2": "/components/test2/test2"}}，在页面的.wxml文件中使用。

    {
      "usingComponents": {
        "my-global-test": "/components/global-test/global-test"
      },
      "pages": [/* 页面列表 */]
    }

  • 选择引用方式：若组件在多个页面常用，建议全局引用；只在特定页面使用，建议局部引用。
• 组件和页面的区别：组件和页面都由四个文件组成，但组件的.json文件需声明"component": true属性，.js文件调用Component()函数，事件处理函数定义在methods节点中。

组件样式

• 组件样式隔离：默认情况下，自定义组件样式只对自身生效，app.wxss中的全局样式对组件无效，只有class选择器有样式隔离效果。

  .red-text {
    color: red;
  }

  页面文本
  

• 修改组件的样式隔离选项：可通过styleIsolation修改，在组件的.js文件中Component({options: {styleIsolation: 'isolated'}})

  Component({
    options: {
      styleIsolation: 'apply-shared'
    }
  })

  或在.json文件中{"styleIsolation": "isolated"}设置，可选值有isolated（启用样式隔离）、apply-shared（页面样式影响组件，组件样式不影响页面）、shared（页面和组件样式相互影响）。

  {
    "styleIsolation": "apply-shared"
  }

组件数据、方法和属性

• data 数据：用于组件模板渲染的私有数据，定义在data节点中

  Component({
    data: {
      count: 0
    }
  })

• methods 方法：事件处理函数和自定义方法定义在methods节点中

  Component({
    methods: {
      increment() {
        this.setData({
          count: this.data.count + 1
        });
      }
    }
  })

• properties 属性：组件的对外属性，用来接收外界传递的数据，可完整定义properties: {max: {type: Number, value: 10}}

  Component({
    properties: {
      maxValue: {
        type: Number,
        value: 10
      }
    }
  })

  或简化定义max: Number

  Component({
    properties: {
      maxValue: Number
    }
  })

  在组件中使用

• data 和 properties 的区别：用法相同，都是可读可写，data倾向于存储私有数据，properties倾向于存储外界传递的数据。
• 使用 setData 修改 properties 的值：可用于页面渲染或使用setData重新赋值，如在组件的.wxml文件中max属性的值为:{{max}}，在.js文件中Component({properties: {max: Number}, methods: {addCount() {this.setData({max: this.properties.max + 1});}}})。

数据监听器

• 定义：用于监听和响应属性和数据字段的变化，类似于vue中的watch侦听器，基本语法格式为Component({observers: {'字段A,字段B': function(字段A的新值,字段B的新值) { // do something }}})。
• 基本用法：

  Component({
    data: {
      num1: 0,
      num2: 0,
      sum: 0
    },
    methods: {
      incrementNum1() {
        this.setData({
          num1: this.data.num1 + 1
        });
      },
      incrementNum2() {
        this.setData({
          num2: this.data.num2 + 1
        });
      }
    },
    observers: {
      'num1,num2': function (num1, num2) {
        this.setData({
          sum: num1 + num2
        });
      }
    }
  })

• 监听对象属性的变化：支持监听对象中单个或多个属性的变化，如Component({observers: {"对象.属性A,对象.属性B': function(属性A的新值,属性B的新值) { // do something }}})。

纯数据字段

Component({
  options: {
    pureDataPattern: /^_/
  },
  data: {
    _privateData: 10,
    publicData: 20
  }
})

• 定义：不用于界面渲染的data字段。
• 使用规则：在Component构造器的options节点中，指定pureDataPattern为正则表达式，符合的字段为纯数据字段，如Component({options: {pureDataPattern: /^_/}, data: {a: true, _b: true}})。

组件的生命周期

Component({
  lifetimes: {
    created: function () {
      // 在这里可以给组件的this添加一些自定义的属性字段
      this.myProperty = 'created';
    }
  }
})

Component({
  lifetimes: {
    attached: function () {
      // 在这里可以进行一些初始化操作，如获取数据
      this.setData({
        dataFromServer: '初始化数据'
      });
    }
  }
})

Component({
  lifetimes: {
    detached: function () {
      // 在这里可以进行一些清理操作，如清除定时器
      clearTimeout(this.timer);
    }
  }
})

• 全部生命周期函数：包括created（组件实例创建时执行）、attached（进入页面节点树时执行）、ready（视图层布局完成后执行）、moved（被移动到节点树另一个位置时执行）、detached（从页面节点树移除时执行）、error（组件方法抛出错误时执行）。
• 主要生命周期函数：created（此时不能调用setData，可添加自定义属性字段）、attached（this.data已初始化完毕，可进行初始化工作）、detached（适合做清理工作），生命周期函数可在lifetimes节点内声明。

组件所在页面的生命周期

Component({
  pageLifetimes: {
    show: function () {
      // 在这里可以根据页面展示重新生成一些数据
      this.setData({
        pageData: '页面展示时更新的数据'
      });
    },
    hide: function () {
      // 在这里可以进行一些与页面隐藏相关的操作
      this.cleanUp();
    },
    resize: function (size) {
      // 这里可以根据页面尺寸变化进行相关操作
      console.log('页面尺寸变化:', size);
    }
  }
})

• 定义：自定义组件行为依赖页面状态变化时用到，包括show（页面被展示时执行）、hide（页面被隐藏时执行）、resize（页面尺寸变化时执行），这些函数需定义在pageLifetimes节点中。

插槽

• 定义：在自定义组件的wxml结构中，节点用于承载组件使用者提供的wxml结构。
• 单个插槽：默认每个自定义组件只允许一个，
•  组件封装者：

  
    组件内部文本
    
  

• 组件使用者：

  
    插槽内容
  

• 启用多个插槽：在组件的.js文件中通过options: {multipleSlots: true}启用。

  Component({
    options: {
      multipleSlots: true
    }
  })

• 定义多个插槽：在组件的.wxml中使用多个标签，以不同的name区分，

  
    
    中间文本
    
  

• 使用多个插槽：在使用组件时，用slot属性将节点插入到不同的中

  
    头部插槽内容
    底部插槽内容
  

父子组件之间的通信

• 通信方式
  • 属性绑定：父组件向子组件指定属性设置数据，父组件如
    ，子组件在properties节点声明对应属性。

    Component({
      properties: {
        value: String
      }
    })

  • 事件绑定：子组件向父组件传递数据，步骤包括父组件定义函数，在wxml中传递函数引用给子组件，子组件通过this.triggerEvent('自定义事件名称', { /* 参数对象 */ })发送数据，父组件通过e.detail获取数据。
  • 父组件（在js文件中定义函数）：

    Page({
      methods: {
        handleChildData(data) {
          console.log('收到子组件数据:', data);
        }
      }
    })

  • 父组件（在wxml文件中传递函数引用给子组件）：

  • 子组件（在js文件中发送数据）：

    Component({
      methods: {
        sendDataToParent() {
          this.triggerEvent('event', {
            data: '子组件数据'
          });
        }
      }
    })

  • 获取组件实例：父组件通过this.selectComponent("id或class选择器")获取子组件实例对象，访问其数据和方法。
  • 父组件：

  • 父组件（在js文件中获取子组件实例并操作）：

    Page({
      methods: {
        getChildComponent() {
          const child = this.selectComponent('#child-component-id');
          child.setData({
            value: '新值'
          });
          child.doSomeMethod();
        }
      }
    })

behaviors

• 定义：用于实现组件间代码共享，类似于Vue.js中的 “mixins”。
• 工作方式：每个behavior包含属性、数据、生命周期函数和方法，组件引用时会合并这些内容，组件可引用多个behavior，behavior也可引用其他behavior。
• 创建 behavior：调用Behavior(Object object)方法创建

  const myBehavior = Behavior({
    properties: {},
    data: {
      behaviorData: 'behavior数据'
    },
    methods: {
      behaviorMethod() {
        console.log('behavior方法');
      }
    }
  });
  module.exports = myBehavior;

• 导入并使用 behavior：使用require()方法导入，挂载到behaviors数组节点中

  const myBehavior = require('./my-behavior');
  Component({
    behaviors: [myBehavior],
    methods: {
      useBehaviorMethod() {
        this.behaviorMethod();
      }
    }
  })

其他内容

• 使用 npm 包：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体使用方法。
• 全局数据共享：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体实现方式。
• 分包：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体操作和作用。
• 案例 - 自定义 tabBar：文档中未详细介绍相关内容，需进一步查阅相关资料了解具体案例实现过程和效果。