微信小程序自定义组件

前言

1.微信小程序内置的组件(view,from ,button等)不能满足我们的需要时,就可以自己定义
2.微信小程序自定义组件这个功能是从小程序基础库版本 1.6.3 开始支持的,低版本需做兼容处理。
3.微信小程序中的组件到底是什么?按照笔者的理解来说就是开发者自己封装一个模块,然后可以在其他页面和其他组件中去引用。(例如:开发者自己做一个导航栏组件,在不同页面用到时就可以直接导入组件,不需要重新写)
4.组件在开发的时候用的比较多,且功能通用或者重复的模块和业务逻辑分离,可以使项目实现高内聚低耦合

一 准备

1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)
微信小程序自定义组件_第1张图片
2.在components文件夹下创建文件夹用来存放组件(文件夹名字与组件最好一致,不容易混乱)
微信小程序自定义组件_第2张图片

二注册组件

新建时,Component与Page的区别:
Component可以直接创建组件文件,
选择Page时,需要.json文件中加上

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

(并且js文件是不一样的需要一个一个创建)
(是在.json中进行自定义组件声明,也就是告诉开发者这是一个组件)
这样components中的组件文件就创建好了,

3.接着在创建一个引用组件的页面,并且在

"usingComponents": {
 
  }

中引入组件,如图:(此处有俩个自定义组件myboxmyborder

{
  "usingComponents": {
    "mybox":"/components/mybox/mybox",
    "myborder":"/components/myborder/myborder"
  }
}

三自定义组件添加属性

在主页面中引用组件,直接写定义的组件名字,
innerText ,outtersize把数据传递给组件

 

在组件的js文件的properties中添加属性

  /**
   * 组件的属性列表
   */
  properties: {
    innerText:{
        type:String,
        value:"mybox我是内部文本"
    },
    outtersize:{
      type:Number,
      value:200
    }

  }

组件的wxml中写好框架,并且导入数据属性


  {
    {innerText}}


wxss中可以定义组件的样式

.outter{
  width: 200px;
  height: 200px;
  background: red;

}
.inner{
    width: 100px;
  height: 100px;
  background: blue;

}

主页面只是调用了组件即可实现效果,如图:
微信小程序自定义组件_第3张图片

四自定义组件添加其他组件

在引用组件时我们要是不在组件的标签中写入其他的内容,是不会显示标签的,但我们要加其他标签属性时,就需要在组件添加其他组件,这时要用到卡槽-------
1.在组件wxml中插入卡槽,并且为了确定是哪个卡槽,用name属性标记
微信小程序自定义组件_第4张图片

微信小程序自定义组件_第5张图片
2.在引用页面中使用卡槽
微信小程序自定义组件_第6张图片
如果要使用多个slot需要在组件js文件Component中添加

 options: {
    multipleSlots: true
  }

即声明使用多个
注意:为了实现项目的高内聚,低耦合。
自定义组件(最好不要)读取外面的样式,组件样式要写在组件的wxss文件中。

自定义组件的事件与组件声明周期函数请看
官方文档

你可能感兴趣的:(微信小程序,微信小程序,自定义组件)