微信小程序-自定义组件

最新推荐文章于 2025-06-04 12:08:17 发布

blabla赞

最新推荐文章于 2025-06-04 12:08:17 发布

阅读量420

点赞数

CC 4.0 BY-SA版权

分类专栏：微信小程序文章标签：小程序组件

本文链接：https://blog.youkuaiyun.com/dadati/article/details/121626294

微信小程序专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了如何在微信小程序中创建和使用自定义组件，包括组件的声明、模板编写、样式设置以及在页面中的引用。通过组件化，开发者可以提高代码复用性和维护性。示例中展示了从新建项目到配置组件路径，再到wxml和wxss的编写，最后呈现了组件在页面中的实际效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

介绍

前提:所有自定义组件相关特性都需要基础库版本 1.6.3 或更高.
好处：开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

创建自定义组件

自定义组件由 json wxml wxss js 4个文件组成。
步骤：
1.son 文件中进行自定义组件声明。

{
  "component": true
}

2.在 wxml 文件中编写组件模板。

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
</view>
<slot></slot>

3.在 wxss 文件中加入组件样式

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}

代码实例
在这里插入图片描述
官方给出的demo,目录结构和微信开发者工具不一样，我一直显示找不到子组件，排查了半天，才发现是文件目录的问题。
具体步骤
1.新建项目，微信开发者工具；
2.新建components文件，该文件下有一套完整的 json wxml wxss js ；
3.进行配置：
3.1在index.json中进行组件路径配置

"usingComponents": {
    "my-component": "/pages/components/component-tag-name"
  }

3.1组件的js结构

Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {

  }
})

4.wxml内部内容
index.wxml

<my-component>
    <!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
     <view>11</view> 
  </my-component>

components-my.wxml

<view class="inner">
这里是子组件
</view>
<slot></slot>

页面显示内容
在这里插入图片描述
那个11的显示，是通过组件的slot标签显示的。但是index里边可以写多行view.