【愚公系列】《微信小程序与云开发从入门到实践》029-自定义组件基础

愚公搬代码

已于 2024-12-07 19:20:23 修改

阅读量4.5w

点赞数 29

分类专栏：愚公系列-书籍专栏文章标签：小程序微信小程序

于 2024-09-15 23:40:12 首次发布

本文链接：https://blog.csdn.net/aa2528877987/article/details/142290932

版权

标题	详情
作者简介	愚公搬代码
头衔	华为云特约编辑，华为云云享专家，华为开发者专家，华为产品云测专家，CSDN博客专家，CSDN商业化专家，阿里云专家博主，阿里云签约作者，腾讯云优秀博主，腾讯云内容共创官，掘金优秀博主，亚马逊技领云博主，51CTO博客专家等。
近期荣誉	2022年度博客之星TOP2，2023年度博客之星TOP2，2022年华为云十佳博主，2023年华为云十佳博主等。
博客内容	.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎	👍点赞、✍评论、⭐收藏

🚀前言

随着移动互联网的快速发展，微信小程序作为一种新兴的应用形态，已经成为了众多开发者和企业的重要选择。它不仅拥有广泛的用户基础，还具备轻便、便捷的特点，能够实现丰富的功能和良好的用户体验。而在小程序的开发过程中，自定义组件的使用则是提升代码复用性和维护性的重要手段。

本文将深入探讨微信小程序自定义组件的基础知识。我们将为您介绍自定义组件的概念、创建方法以及使用场景，帮助您在小程序开发中更高效地构建复杂的用户界面。无论您是小程序开发的新手，还是希望进一步提升开发技能的老手，相信本文都能为您提供有价值的参考。

让我们一起踏上探索自定义组件的旅程，掌握这一重要技能，为您的小程序开发增添更多可能性！

在小程序开发框架中提供了非常丰富的内置组件，很多时候，自定义组件也是在这些内置组件的基础上进行组合和扩展而来的。

创建组件文件夹
- 在示例工程的根目录下，首先新建一个名为 component 的文件夹，用来存放你创建的自定义组件。
创建页面文件
- 在 pages 文件夹下，创建一组名为 customComponent 的页面文件，用于演示自定义组件。
自定义组件的文件结构
- 自定义组件与页面类似，也是由四个文件组成：
  - JSON 文件：负责组件的配置。
  - WXML 文件：负责组件的结构。
  - WXSS 文件：负责组件的样式。
  - JavaScript 文件：负责组件的数据和逻辑。
使用微信开发者工具创建自定义组件
- 你可以在 component 文件夹下新建一组名为 component1 的自定义组件文件。无需手动创建每个文件，微信开发者工具提供了相应的创建工具：
  - 右键点击 component 文件夹，选择弹出菜单中的“新建 Component”选项，工具会自动为你创建所需的文件。
观察 component1.json 文件
- 创建完成后，首先查看 component1.json 文件中默认生成的代码：
```
{
       
  "component": true,
  "usingComponents": {
       }
}
```
  - component 设置为 true，标志着这是一个自定义组件。
编写组件结构（component1.wxml）
- 在 component1.wxml 文件中，编写组件的结构代码：
```
<view>
  <view style="text-align: center;">{
      {title}}</view>
  
```