微信小程序如何创建自定义组件

2021-04-08 10:30发布

7条回答
芒果
2楼 · 2021-04-09 11:49

一、 准备

1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)

2.在components文件夹下创建文件夹用来存放组件(文件夹名字与组件最好一致,不容易混乱)

二、注册组件

三、自定义组件添加属性

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

一个Ai
3楼 · 2021-04-09 11:56

创建一个组件

一个组件需要包括json、wxml、wxss、js四个文件组成,下面我们先看看一个简单的入门:



   {{innerText}}


编写JS文件,组件的属性值和内部数据将被用于组件 wxml 的渲染,其中,属性值是可由组件外部传入的

// components/component/component.js
Component({
   /**
    * 组件的属性列表
    */
   properties: {
       innerText: {
           type: String,
           value: 'hello world'
       },
       myProperties:String
   },

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

   },

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

   }
})

设置字体的颜色

/* components/component/component.wxss */
.inner{color: red;}

完成对组件的初始化,包括设置属性列表,初始化数据,以及设置相关的方法。

使用自定义组件

使用已注册自定义组件前,首先要在页面的 json 文件中进行引用声明。此时需要提供每个自定义组件的标签名和对应的自定义组件文件路径:

{
 "usingComponents": {
   "component": "/components/component/component"
 }
}

在page页面下添加声明过的自定义组件



 
   
   这里是插入到组件slot中的内容
 


上方的是一个最简单的自定义组件

注意事项:

1.对于基础库的1.5.x版本, 1.5.7 也有部分自定义组件支持。

2.因为WXML节点标签名只能是小写字母、中划线和下划线的组合,所以自定义组件的标签名也只能包含这些字符。

3.自定义组件也是可以引用自定义组件的,引用方法类似于页面引用自定义组件的方式(使用 usingComponents 字段)。

4.自定义组件和使用自定义组件的页面所在项目根目录名不能以“wx-”为前缀,否则会报错。

5.旧版本的基础库不支持自定义组件,此时,引用自定义组件的节点会变为默认的空节点。


请叫我雷锋叔叔啊
4楼 · 2021-04-09 21:01

1.微信小程序内置的组件(view,from ,button等)不能满足我们的需要时,就可以自己定义

2.微信小程序自定义组件这个功能是从小程序基础库版本 1.6.3 开始支持的,低版本需做兼容处理。

3.微信小程序中的组件到底是什么?按照笔者的理解来说就是开发者自己封装一个模块,然后可以在其他页面和其他组件中去引用。(例如:开发者自己做一个导航栏组件,在不同页面用到时就可以直接导入组件,不需要重新写)

4.组件在开发的时候用的比较多,且功能通用或者重复的模块和业务逻辑分离,可以使项目实现高内聚低耦合。


一 准备

1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)


2.在components文件夹下创建文件夹用来存放组件(文件夹名字与组件最好一致,不容易混乱)



二注册组件

新建时,Component与Page的区别:

Component可以直接创建组件文件,

选择Page时,需要.json文件中加上


{

    "component": true

}

1

2

3

{

  "component": true,

  "usingComponents": {}

}

1

2

3

4

(并且js文件是不一样的需要一个一个创建)

(是在.json中进行自定义组件声明,也就是告诉开发者这是一个组件)

这样components中的组件文件就创建好了,


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


"usingComponents": {

 

  }

1

2

3

中引入组件,如图:(此处有俩个自定义组件mybox与myborder)


{

  "usingComponents": {

    "mybox":"/components/mybox/mybox",

    "myborder":"/components/myborder/myborder"

  }

}

1

2

3

4

5

6

三自定义组件添加属性

在主页面中引用组件,直接写定义的组件名字,

innerText ,outtersize把数据传递给组件


 

1

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


  /**

   * 组件的属性列表

   */

  properties: {

    innerText:{

        type:String,

        value:"mybox我是内部文本"

    },

    outtersize:{

      type:Number,

      value:200

    }


  }

1

2

3

4

5

6

7

8

9

10

11

12

13

14

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


  {{innerText}}


1

2

3

4

wxss中可以定义组件的样式


.outter{

  width: 200px;

  height: 200px;

  background: red;


}

.inner{

    width: 100px;

  height: 100px;

  background: blue;


}

1

2

3

4

5

6

7

8

9

10

11

12

主页面只是调用了组件即可实现效果,如图:



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

在引用组件时我们要是不在组件的标签中写入其他的内容,是不会显示标签的,但我们要加其他标签属性时,就需要在组件添加其他组件,这时要用到卡槽-------

1.在组件wxml中插入卡槽,并且为了确定是哪个卡槽,用name属性标记




2.在引用页面中使用卡槽


如果要使用多个slot需要在组件js文件Component中添加


 options: {

    multipleSlots: true

  }

1

2

3

即声明使用多个

注意:为了实现项目的高内聚,低耦合。

自定义组件(最好不要)读取外面的样式,组件样式要写在组件的wxss文件中



任@先生
5楼 · 2021-04-11 16:21

一、 准备

二、注册组件

三、自定义组件添加属性

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



夏虫语冰
6楼 · 2天前

一、 准备

1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)

2.在components文件夹下创建文件夹用来存放组件(文件夹名字与组件最好一致,不容易混乱)

二、注册组件

三、自定义组件添加属性

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


希希
7楼 · 2天前

一、 准备

1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)

2.在components文件夹下创建文件夹用来存放组件(文件夹名字与组件最好一致,不容易混乱)

二、注册组件

三、自定义组件添加属性

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


寂静的枫林
8楼 · 6小时前

一、 准备

1.在新建的项目,在pages同级文件夹,创建一个components文件夹,(文件夹位置随意,也可在pages中,使用时正确导入位置信息就OK了),用来放我们所有的自定义组件.(component意思为组件)

2.在components文件夹下创建文件夹用来存放组件(文件夹名字与组件最好一致,不容易混乱)

二、注册组件

三、自定义组件添加属性

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