微信小程序自定义组件（Component）_wx component

前言

微信小程序（后面统称小程序）中的组件到底是什么？按照笔者的理解来说就是开发者自己封装的一个的模块，然后可以再页面和其他组件中去引用。做过移动（Android/iOS）开发的小伙伴们肯定知道自定义控件，就跟那个差不多。使用组件能让我们在开发的时候将用的较多，且功能通用或者重复的模块和业务逻辑分离，从而使项目耦合降低，可读性强和维护性成本降低。

步骤

在小程序中自定义组件有哪些步骤了？

• 在项目根目录新建一个文件夹component（这个只是推荐写法，理论上来说文件夹只要能建在页面能引用到的地方即可，而且文件夹名字可在不违背命名规则的情况下可以随意）
• 在component目录下新建一个目录，取名为你自定义组件名字
• 在页面中引用

没错，就只要这三步我们就能实现一个最简单的自定义组件

简单例子

接下来我们就按照上面的步骤来实现一个很简单的例子，有多简单了？看下图：

在项目根目录新建一个文件夹component

在component目录下新建一个目录，取名为componentview

可以看到，这个组件目录结构跟小程序普通页面结构是一样的，都是包含四个文件，但是.js和.json文件和普通页面略有不同。下面我们来看下每个文件的构成。

js文件

// js文件
Component({
  /**
   * 组件的属性列表
   */
  properties: {},

  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {}
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

json文件，一定要注意，组件json文件中的component必须为true，这点和普通页面不同。

{
  "component": true
}
1
2
3

wxml文件，很简单，就一个view

<view>view from component</view>
1

在页面中引用

在引用页面的json文件中增加引用组件配置

{
  "usingComponents": {
    "component-view": "../component/componentview/componentview"
  }
}
1
2
3
4
5

然后在引用页面的wxml中添加组件

<view>view form index</view>
<component-view/>//注意这里的名字要和json文件中的组件名字保持一致
1
2

好了，到这里，一个最简单的自定义组件就完成了，自定义组件大体就是按照这几个步骤来，只不过实现的组件的复杂度不同而已，万变不离其宗。接下来我们看下效果。

如何轻松的自定义组件

为了能更轻松的实现复杂的自定义组件的功能，我们还需要了解一些组件的知识点。

组件的属性

就是porperties大括号中的部分，开发者可以在这个里面自定义属性。这里我添加三个属性width，height，backgroundcolor

...
properties: {
    //  组件显示区域的宽度 (rpx)
    width: {
      type: Number,
      value: 750 // 组件默认宽度 即整屏宽
    },
    //  组件显示区域的高度 (rpx)
    height: {
      type: Number,
      value: 60 // 组件默认高度
    },
    //  组件背景颜色
    backgroundcolor: {
      type: String,
      value: 'red'
    }
  }
  ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

在组件的wxml引用属性

<view style='background:{{backgroundcolor}};width:{{width}}rpx;height:{{height}}rpx;'>view from component</view>
1

引用页面中不给组件设置属性时看下效果：

接下来，我们加上属性

<view>view form index</view>
<component-view width='520' backgroundcolor='green'/>
1
2

height属性没有加就是默认值，接下来看下效果：

如果你愿意，还可以加上字体颜色等其他属性。
最后还要注意的是，type类型常用的有：String、Number、Boolean、Object等属性

组件的生命周期

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

 },

 /**
  * 组件的初始数据
  */
 data: {
  
 },
 //在组件实例刚刚被创建时执行,注意此函数中不能使用setData操作
 created: function () {
	 console.log('created')
 },
 // 在组件实例进入页面节点树时执行
 attached: function () {
   console.log('attached')
 },
 //在组件在视图层布局完成后执行
 ready: function () {
  console.log('ready')
 },
 //在组件实例被移动到节点树另一个位置时执行
 moved: function () {
  console.log('moved')
 },
 // 在组件实例被从页面节点树移除时执行
 detached: function () {
   console.log('detached')
 },

 /**
  * 组件的方法列表
  */
 methods: {
 
 }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

利用这些组件生命周期函数，我们可以做数据的初始化，销毁等等工作。

宿主（引用页面）生命周期

在组件中同样还可以调用其宿主生命周期函数,注意下面的三个函数都限定了最低版本库

...
pageLifetimes: {
	//组件所在的页面被展示时执行 最低版本2.2.3
    show: function () {
      console.log('页面被展示')
    },
    //组件所在的页面被隐藏时执行 最低版本2.2.3
    hide: function () {
      console.log('页面被隐藏')
    },
    //这个函数一般使用场景较少，了解就可以了  最低版本2.4.0
    resize: function (size) {
      console.log('页面尺寸变化')
    }
  }
  ...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

这个也没啥好说的了，至于什么时候会用到这个，你肯定懂得。

slot节点

看到这里，你会发现，组件其实就是一个自定义view，只不过这个view封装了我们自己的某些业务逻辑。既然是view，能不能包裹其他view？例如下面这种写法：

<view>view form index</view>
<component-view width='520' backgroundcolor='green'>
  <view>view warp by component-view</view>
</component-view>
1
2
3
4

如果只是修改wxml，显然是不会有效果的。而组件中的slot节点则是用来解决这个问题的。接下来看代码：

组件js文件：

...
options: {
    multipleSlots: true // 在组件定义时的选项中启用slot支持
}
...
1
2
3
4
5

组件wxml文件

<view style='background:{{backgroundcolor}};width:{{width}}rpx;height:{{height}}rpx;'>view from component</view>
<slot name='content'></slot>//增加slot节点
1
2

宿主（引用组件的页面）只需要修改下wxml文件

<view>view form index</view>
<component-view width='520' backgroundcolor='green'>
  <view slot='content'>view warp by component-view</view>
</component-view>
1
2
3
4

接下来我们看下效果图：

可以看到，被组件包裹的view已经能正确在页面显示。

尾巴

好了，今天的文章就到这里了，如果文章中有错误的地方，欢迎大家留言指正。如果你喜欢我的文章，也欢迎给我点赞，评论，谢谢！