小程序如何写自定义组件

从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程

为什么写组件呢？

主要是避免在不同的页面中重复使用，也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。

自定义组件在使用时与基础组件非常相似。

 

如何编写一个自定义组件？

每个自定义组件由四个代码文件组成：

json文件 用于于放置一些最基本的组件配置

wxml 文件 组件模版

wxss 文件 组件的样式，只在组件内部节点上生效

js 文件 组件的 JS 代码，承载组件的主要逻辑

这四个文件与编写一个页面时用到的四个文件非常类似，但也有区别。下面将介绍如何利用这四个文件编写一个简单的自定义组件。

 

1、组件配置

json 配置文件信息

这里我们把文件放置在小程序的 components目录下 命名为 emptyPage。

命名为 emptyPage.json 。

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

2、组件模板

在同一目录下，创建一个模版文件 emptyPage.wxml

  
  这里什么也没有哦！

 

3、组件样式

在同一目录下，创建一个模版文件 emptyPage.wxss

.emptyPage-view{
  width: 100%;
  height: 100%;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-items: center;
  align-items: center;
}

.emptyPage-image{
  margin-top: 266rpx;
  width: 360rpx;
  height: 188rpx;
}
.emptyPage-text{
  margin-top: 28rpx;
  font-family: PingFangSC-Regular;
  font-size: 28rpx;
  color: #C6C6C6;
  text-align: center
}

4、组件定义

组件的 JS 文件中必须包含组件定义。定义时使用 Component 构造器：

Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isShow: Boolean,//是否显示
  },

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

  },

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

  }
})

简单的 Component 构造器调用包含3个定义段：

methods 中的方法可以用来包含组件的事件回调函数；

data 是组件的内部数据，可以用 this.setData 方法来改变；

properties 中声明这个组件的属性，上例中声明了 isShow 属性，这样，组件外部在使用组件时就可以指定这个属性的值。

这样我们就编写好了 emptyPage 这个组件。

 

如何使用自定义组件呢？

使用上面这个自定义组件的方法很简单。

1、声明组件

在需要使用这个组件的页面所对应的 json 文件中，添加下面的自定义组件声明：

{
    "usingComponents": {
      "emptyPage": "/components/emptyPage/emptyPage"
    }
}

 

2、使用组件

在页面对应的wxml文件中使用    是否显示该界面

 

除了上述的基本功能外，自定义组件还提供了一组基础接口，用来实现各种各样的功能。

这里只是写一个简单的小组件， 如果想学习更多最好到官网查看更加详细信息

微信自定义组件地址