[猫头虎分享21天微信小程序基础入门教程] 第12天：小程序的自定义组件开发

news2024/11/18 16:42:06

[猫头虎分享21天微信小程序基础入门教程] 第12天：小程序的自定义组件开发

第12天：小程序的自定义组件开发 🛠️

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们继续微信小程序的学习，重点了解如何开发自定义组件。自定义组件可以提高代码的复用性和模块化程度，使开发更加高效和灵活。🚀

自定义组件的基础

一、创建自定义组件

1. 创建组件目录和文件

首先，在项目根目录下创建一个 components 文件夹，在其中创建一个自定义组件，例如 my-component：

components/
  my-component/
    my-component.js
    my-component.json
    my-component.wxml
    my-component.wxss

2. 定义组件的配置文件

在 my-component.json 文件中定义组件的基本配置：

{
  "component": true
}

3. 定义组件的逻辑和样式

在 my-component.js 文件中定义组件的逻辑：

Component({
  properties: {
    title: {
      type: String,
      value: 'Default Title'
    }
  },
  data: {
    // 组件内部数据
  },
  methods: {
    onTap() {
      this.triggerEvent('customEvent', { message: 'Hello from component' });
    }
  }
});

在 my-component.wxml 文件中定义组件的模板：

<view class="container">
  <text>{{title}}</text>
  <button bindtap="onTap">Click Me</button>
</view>

在 my-component.wxss 文件中定义组件的样式：

.container {
  padding: 20rpx;
  border: 1px solid #ddd;
  border-radius: 5rpx;
  text-align: center;
}

二、使用自定义组件

1. 注册组件

在使用组件的页面中注册组件。在页面的 json 文件中添加如下配置：

{
  "usingComponents": {
    "my-component": "/components/my-component/my-component"
  }
}

2. 使用组件

在页面的 wxml 文件中使用组件：

<view class="page">
  <my-component title="Custom Title" bind:customEvent="handleCustomEvent"></my-component>
</view>

在页面的 js 文件中处理组件事件：

Page({
  handleCustomEvent(event) {
    console.log(event.detail.message); // 输出: Hello from component
  }
});

组件间通信

一、父组件向子组件传递数据

通过 properties 向子组件传递数据：

Component({
  properties: {
    title: {
      type: String,
      value: 'Default Title'
    }
  }
});

二、子组件向父组件传递事件

通过 triggerEvent 向父组件传递事件：

methods: {
  onTap() {
    this.triggerEvent('customEvent', { message: 'Hello from component' });
  }
}

三、组件之间的数据和事件传递

父组件向子组件传递数据，子组件向父组件传递事件：

<my-component title="Custom Title" bind:customEvent="handleCustomEvent"></my-component>

Page({
  handleCustomEvent(event) {
    console.log(event.detail.message); // 输出: Hello from component
  }
});

组件的生命周期

一、组件的生命周期函数

组件有一系列生命周期函数，可以在不同阶段执行代码：

Component({
  lifetimes: {
    attached() {
      console.log('Component attached to DOM');
    },
    ready() {
      console.log('Component is ready');
    },
    detached() {
      console.log('Component detached from DOM');
    }
  }
});

二、页面的生命周期函数

组件也可以监听页面的生命周期函数：

Page({
  onLoad() {
    console.log('Page loaded');
  },
  onReady() {
    console.log('Page ready');
  },
  onUnload() {
    console.log('Page unloaded');
  }
});

小测试 🧪

创建一个自定义组件，并在页面中使用它。
实现父组件向子组件传递数据，子组件向父组件传递事件。

今日学习总结 📚

概念	详细内容
自定义组件	创建组件目录和文件，定义组件的配置、逻辑和样式
组件间通信	父组件向子组件传递数据，子组件向父组件传递事件
组件的生命周期函数	组件和页面的生命周期函数