微信小程序自定义组件

1.创建自定义组件

在上面我介绍了,自定义组件其实就像是一个页面,所以我们在编写它的时候也应该像设计页面一样,具备json wxml wxss js这四个文件.

在这里博主就以编写案例的形式向大家介绍自定义组件.

一. 前期准备
1.首先,新建一个名为wxcomponent的项目,
2.在pages文件夹下创建一个components文件夹用来盛放我们所有的自定义组件.
3.在components文件夹下创建一个cpt的文件夹用来盛放cpt这个自定义组件,并分别创建好对应的配置文件,如下图:

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

{
  "component": true
}

三. 设计组件结构
在 wxml 文件中编写组件模版，在 wxss 文件中加入组件样式:
cpt.wxml文件

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
  <button bindtap='customMethod'>点击</button>
  <slot></slot>
</view>复制代码

cpt.wxss文件

/* 这里的样式只应用于这个自定义组件 */
.inner {
  color: red;
}复制代码

这里的`暂时可以不用管它.

并且自定义组件在设计结构的时候是不应该使用给便签加上id或者使用属性选择器和标签名选择器的.
这是因为组件就是被我们那里重用的,而页面中只能允许有一个id.

四: 注册组件

在自定义组件的js文件中,需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法,如在cpt.js中:

Component({
  properties: {
    // 这里定义了innerText属性，属性值可以在组件使用时指定
    innerText: {
      type: String,
      value: 'default value',
    }
  },
  data: {
    // 这里是一些组件内部数据
    someData: 1
  },
  methods: {
    // 这里是一个自定义方法
    customMethod: function () {
      console.log('customMethod')
    }
  }
})复制代码

五: 使用自定义组件
这里我为了简便一点,就直接用自带的logs页面来进行自定义组件的调用吧.
首先,你应该在你要用组件的那个页面中引用声明.也就是在.json文件.
如在logs.json中:

{
  "navigationBarTitleText": "查看启动日志",
  "usingComponents": {
    "component-tag-name": "../components/cpt/cpt"
  }
}复制代码

接下来我们就可以在页面中像使用其他组件一样的使用自定义组件了.
比如我在logs.wxml中使用:

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text"></component-tag-name>
</view>复制代码

跳转到logs页面如下图的效果:

result.png

 

六: 使用slot
在上面的例子中,在cpt.wxml中写入了标签,在引用cpt这个组件时我们要是不在组件的标签中写入其他的内容,是不会显示标签的

也就是说如果我们把上面logs.wxml改动一下:

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text">
    <view>这里是插入到组件slot中的内容</view>
  </component-tag-name>
</view>复制代码

此时查看logs页面:

slot.png

 

并且<slot></slot>的位置在哪里也是由你在设计cpt组件时决定的
上面的例子中我是将slot放在button之下:

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  {{innerText}}
  <button bindtap='customMethod'>点击</button>
  <slot></slot>
</view>复制代码

你也可以将它放在其他位置来达到不同的效果.

七: 使用多个slot
正常情况下,一个组件中只有一个slot,但有时候我们的自定义组件可能不止使用一个slot,别怕,我们的微信小程序也是可以允许你这样的.
需要使用多slot时，可以在组件js中声明启用
1.在cpt.json(你自定义组件的json文件)中声明

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})复制代码

2.此时，可以在这个组件的wxml中使用多个slot,以不同的 name 来区分:

<!-- 这是自定义组件的内部WXML结构 -->
<view class="inner">
  <slot name="header"></slot>    <-- 一定要记得使用name属性 -->
  {{innerText}}
  <button bindtap='customMethod'>点击</button>
  <slot name="footer"></slot>
</view>复制代码

3.使用时，用 slot 属性来将节点插入到不同的slot上。

<!--logs.wxml-->
<view class="container log-list">
  <!-- 以下是对一个自定义组件的引用 -->
  <component-tag-name inner-text="Some text">
    <view slot="header">头部的内容</view>
    <view slot="footer">底部的内容</view>
  </component-tag-name>
</view>复制代码