当前位置：首页 > article >正文

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

article 2024/12/22 0:21:16

1. 页面导航

导航方式
- 声明式导航：使用<navigator>组件实现页面跳转。
```

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


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


<navigator open-type='navigateBack' delta='1'>返回上一页</navigator>
```
  - 跳转到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属性后面携带参数，格式为?参数键=参数值&参数键=参数值。
```

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

编程式导航传参：调用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文件中的<wxs>标签内，需提供module属性。

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

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

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

使用外联的 wxs 脚本：在wxml中引入时，需为<wxs>标签添加module和src属性。
```
<view>{m2.toLower(country)}</view>
<wxs src="../../utils/tools.wxs" module="m2"></wxs>
```

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

5. 自定义组件

组件的创建与引用

创建组件：在项目根目录创建components文件夹，在其中创建组件文件夹，右键点击 “新建 Component” 并输入组件名称，会自动生成.js、.json、.wxml和.wxss四个文件。
test.js
```
Component({
  // 组件逻辑代码
})
```
test.json
```
{
  "component": true
}
```

test.wxml

<view>这是一个自定义组件</view>

test.wxss
```
view {
  color: red;
}
```
引用组件
- 局部引用：在页面的.json配置文件中引用，如{"usingComponents": {"my-test1": "/components/test1/test1"}}，在页面的.wxml文件中使用<my-test1></my-test1>。
```
{
  "usingComponents": {
    "my-test": "/components/test1/test1"
  }
}
```
```
<my-test></my-test>
```
- 全局引用：在app.json全局配置文件中引用，如{"usingComponents": {"my-test2": "/components/test2/test2"}}，在页面的.wxml文件中使用<my-test2></my-test2>。
```
{
  "usingComponents": {
    "my-global-test": "/components/global-test/global-test"
  },
  "pages": [/* 页面列表 */]
}
```
```
<my-global-test></my-global-test>
```
- 选择引用方式：若组件在多个页面常用，建议全局引用；只在特定页面使用，建议局部引用。
组件和页面的区别：组件和页面都由四个文件组成，但组件的.json文件需声明"component": true属性，.js文件调用Component()函数，事件处理函数定义在methods节点中。

组件样式

组件样式隔离：默认情况下，自定义组件样式只对自身生效，app.wxss中的全局样式对组件无效，只有class选择器有样式隔离效果。
```
.red-text {
  color: red;
}
```
```
<view class="blue-text">页面文本</view>
<my-test></my-test>
```
修改组件的样式隔离选项：可通过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
  }
})
```
在组件中使用<my-test1 max="10"></my-test1>
```
<my-test maxValue="5"></my-test>
```
data 和 properties 的区别：用法相同，都是可读可写，data倾向于存储私有数据，properties倾向于存储外界传递的数据。
使用 setData 修改 properties 的值：可用于页面渲染或使用setData重新赋值，如在组件的.wxml文件中<view>max属性的值为:{{max}}</view>，在.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结构中，<slot>节点用于承载组件使用者提供的wxml结构。
单个插槽：默认每个自定义组件只允许一个<slot>，

组件封装者：

<view class="wrapper">
  <view>组件内部文本</view>
  <slot></slot>
</view>

组件使用者：

<my-component>
  <view>插槽内容</view>
</my-component>

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

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

<view class="wrapper">
  <slot name="header"></slot>
  <view>中间文本</view>
  <slot name="footer"></slot>
</view>

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

<my-component>
  <view slot="header">头部插槽内容</view>
  <view slot="footer">底部插槽内容</view>
</my-component>

父子组件之间的通信

通信方式

属性绑定：父组件向子组件指定属性设置数据，父组件如

<parent-component>
  <child-component value="{{parentValue}}"></child-component>
</parent-component>

，子组件在properties节点声明对应属性。

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

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

父组件（在js文件中定义函数）：

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

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

<parent-component>
  <child-component bind:event="handleChildData"></child-component>
</parent-component>

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

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

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

父组件：

<parent-component>
  <child-component id="child-component-id"></child-component>
</parent-component>

父组件（在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();
    }
  }
})