微信小程序自定义组件(Component)

前言

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

步骤

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

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

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

简单例子

接下来我们就按照上面的步骤来实现一个很简单的例子,有多简单了?看下图:
在这里插入图片描述

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

在这里插入图片描述

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

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

js文件

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

  /**
   * 组件的初始数据
   */
  data: {},
  /**
   * 组件的方法列表
   */
  methods: {}
})

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

{
  "component": true
}

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

<view>view from component</view>

在页面中引用

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

{
  "usingComponents": {
    "component-view": "../component/componentview/componentview"
  }
}

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

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

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

如何轻松的自定义组件

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

组件的属性

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

...
properties: {
    //  组件显示区域的宽度 (rpx)
    width: {
      type: Number,
      value: 750 // 组件默认宽度 即整屏宽
    },
    //  组件显示区域的高度 (rpx)
    height: {
      type: Number,
      value: 60 // 组件默认高度
    },
    //  组件背景颜色
    backgroundcolor: {
      type: String,
      value: 'red'
    }
  }
  ...

在组件的wxml引用属性

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

引用页面中不给组件设置属性时看下效果:
在这里插入图片描述

接下来,我们加上属性

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

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: {
 
 }
})

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

宿主(引用页面)生命周期

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

...
pageLifetimes: {
	//组件所在的页面被展示时执行 最低版本2.2.3
    show: function () {
      console.log('页面被展示')
    },
    //组件所在的页面被隐藏时执行 最低版本2.2.3
    hide: function () {
      console.log('页面被隐藏')
    },
    //这个函数一般使用场景较少,了解就可以了  最低版本2.4.0
    resize: function (size) {
      console.log('页面尺寸变化')
    }
  }
  ...

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

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>

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

组件js文件:

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

组件wxml文件

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

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

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

接下来我们看下效果图:
在这里插入图片描述
可以看到,被组件包裹的view已经能正确在页面显示。

尾巴

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

评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值