[猫头虎分享21天微信小程序基础入门教程]第5天：组件化开发与复用 🛠️

---

第5天：组件化开发与复用 🛠️

自我介绍

大家好，我是猫头虎，一名全栈软件工程师。今天我们将继续微信小程序的学习，重点探索组件化开发与复用。这一技能对于构建复杂且高效的小程序非常重要。让我们一同开始今天的学习旅程吧！🚀

组件化开发的意义 🤔

组件化开发是将页面拆分成多个独立且可复用的部分，每个部分称为一个组件。这样可以提高代码的可维护性和复用性，使得开发过程更加高效。

组件的基本结构 🏗️

每个组件由四个文件组成：

• json 配置文件：用于配置组件的属性。
• wxml 模板文件：定义组件的结构。
• wxss 样式文件：定义组件的样式。
• js 脚本文件：定义组件的逻辑。
  

创建一个自定义组件

1. 在项目根目录下创建一个 components 文件夹。
2. 在 components 文件夹下创建一个新的组件文件夹，例如 myComponent。
3. 在 myComponent 文件夹下创建四个文件：myComponent.json、myComponent.wxml、myComponent.wxss 和 myComponent.js。
   

示例代码

myComponent.json

{
  "component": true,
  "usingComponents": {}
}

myComponent.wxml

<view class="my-component">
  <text>{{message}}</text>
</view>

myComponent.wxss

.my-component {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

myComponent.js

Component({
  properties: {
    message: {
      type: String,
      value: "Hello, I am a component!"
    }
  },
  data: {},
  methods: {}
});

在页面中使用组件 📋

注册组件

在使用组件的页面的 json 文件中注册组件：

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

引用组件

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

<view class="container">
  <my-component message="This is a custom message!"></my-component>
</view>

小测试 🧪

• 创建一个简单的自定义组件，并在一个页面中使用它。尝试修改组件的属性，观察变化效果。

今日学习总结 📚

概念	详细内容
组件化开发	学习了如何创建和使用自定义组件
组件结构	了解了组件的基本结构及其组成部分
组件注册与引用	学习了如何在页面中注册并引用自定义组件

结语

通过今天的学习，你应该掌握了如何在微信小程序中进行组件化开发与复用。这将极大地提高你的开发效率和代码质量。明天我们将探讨如何与服务器进行数据交互。如果你有任何疑问，欢迎关注并留言在我的公众号猫头虎技术团队。📩

---