微信小程序自定义组件

前言

微信小程序自1月19号发布后,可谓是有人欢喜有人忧啊.曾经对它一度抱有各种期待的前端工作者们在张总的一句句:"不行","不能"中小失所望.
但它作为一种轻型应用工具,给我们开发者带来的便利也是无可厚非的.
而自定义组件这个大功能呢也是从小程序基础库版本 1.6.3 开始支持的，低版本需做兼容处理,在搜了网上一堆微信小程序自定义组件的说明后,我好像发现都没有太好的介绍到它,所以今天在这里博主也是想给大家仔细的介绍介绍微信小程序的这个自定义功能,有说的不好的地方望小伙们指正,谢谢!(╹▽╹)

使用自定义组件

应用场景:
当我们在设计我们项目的时候会发现在不同的页面中,有时候会用到相同的功能模块,此时我们就可以将这些相同的部分提取出来并且单独设为一个"页面",然后在要应用到它的地方引用就可以了,以上就是我对自定义组件的个人理解,具体做法请阅读以下内容.

1.创建自定义组件

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

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

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

component.png

二. 自定义组件声明
要在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;
}

这里的`<slot></slot>暂时可以不用管它.

并且自定义组件在设计结构的时候是不应该使用给便签加上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中写入了<slot></slot>标签,在引用cpt这个组件时我们要是不在组件的标签中写入其他的内容,是不会显示<slot>标签的

也就是说如果我们把上面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>

后语

微信小程序中自定义组件的用法还有很多,比如组件生命周期,事件等等,更多的内容可以参考官方文档.