自定义组件-基本使用

介绍

自定义组件可理解为允许我们创造自己想要的某些效果的标签。如：

image是小程序指定的图片标签
border-image 可以是我们自己创造的标签

自定义组件还具有简化页面结构、封装复用代码的功能。

使用步骤

创建组件
注册组件
使用组件

创建组件

通常将项目中的组件都放在一个独立的目录下，并且一般就给这个文件夹取名为：components 。这个目录需要我们手动进行创建。
。

具体步骤如下：

新建一个目录：components
在components上点击鼠标右键，选择「新建Component」
填入组件的名字。它会自动创建4个同名的文件。（这一点和创建页面是一样的）

组件和页面的结构是一致的，但也是有区别：

组件的配置文件（.json文件）中，有一个配置项：component: true
组件的 .js 文件中调用 Component 函数，页面的.js文件中调用Page函数

注册

分为页面注册和全局注册

页面注册是在使用组件的页面配置(xxxx.json)中通过 usingComponents 进行注册，只能在当前页面中使用该组件

全局注册是在 app.json 文件中通过 usingComponents 对自定义组件进行注册，注册的组件可以任意页面中使用全局注册的组件

"usingComponents": {
    "my-test": "/components/MyTest/index"
}

这里的路径还是使用的绝对路径，不过要注意哈，我们之前在配置中设置了root值，所以呢，这里的/components是起点。

使用

在wxml中，直接通过标签的方式使用即可。

如果效果没有出来，可以清下缓存试试。

自定义组件—组件样式

内容

组件中的样式不要使用标签选择器
组件中，样式默认是隔离的：自定义组件的样式只受到自定义组件 wxss 的影响
通过对组件的配置，可以取消这个隔离的状态。

组件中的样式不要使用标签选择器

使用会报警告

标签选择器本身就是一个坏选择：页面上样式中的标签选择器也会作用于组件

组件中，class选择器的样式默认是隔离

默认情况下，自定义组件的样式只受到自定义组件 wxss 的影响。

组件的class选择器不会影响页面元素
页面的class选择器不会影响组件元素

样式隔离注意点

app.wxss中的全局样式对组件无效

只有class选择器具有样式隔离效果，id选择器、属性选择器、标签选择器不受样式隔离的影响

建议：在组件和引用组件的页面中建议使用class选择器，不要使用id、属性、标签选择器

修改组件样式的隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望外界能够控制组件内部的样式，此时，可以通过在组件的.js文件中设置: options → addGlobalClass 为true

Component({
  options: {
    addGlobalClass: true
  }
})

在页面中设置的同类名的选择器就能作用于子组件内部的元素。但是，组件内的class选择器，不能影响页面的元素。

自定义组件—组件样式-外部样式类

外部样式类

组件希望接受外部传入的样式类。此时可以在 Component 中用 externalClasses 定义若干个外部样式类。

在开发组件时，主动暴露给组件使用者，修改组件内部样式

/* 组件 custom-component.js */
Component({
  externalClasses: ['my-class']
});

<!-- 组件的wxml -->
<!-- 这里的my-class相当于一个占位符 -->
<view class="my-class">components/MyTest/index.wxml</view>

<!-- 页面的 WXML -->
<custom-component my-class="red-text" />
<custom-component my-class="large-text" />

.red-text{ color: red; }
.large-text {font-size: 50px; }

小结

外部样式类相当于用一个类名去当占位符，以便于在后期使用时替换成真实的类名，方便添加额外的样式。

参考：vant-contrib.gitee.io/vant-weapp/…

自定义组件—数据方法

目标

能熟练使用自定义数据、属性和方法丰富自定义组件。

组件的典型结构

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

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

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

data数据

定义数据

在小程序中，用于组件模板渲染的私有数据， 需要定义到data中。示例如下：

Component({
	data: {
  	num: 100
  }
});

在视图中展示数据

<view>{{num}}</view>

methods方法

在小程序的组件中，事件处理函数和自定义方法需要定义到methods中，示例如下：

Component({
	methods: {
  	handleAdd() {
      this.setData({
      	num: this.data.num + 1
      });
    },
    
    handleSub() {
      this.setData({
      	num: this.data.num - 1
      });
    }
  }
});

自定义组件—组件插槽

目标

掌握自定义组件中插槽的使用方式

什么是插槽

在自定义组件的wxml结构中，我们可以提供一个节点，用于承载组件使用者提供的wxml结构。插槽可以方便开发者将不确定的、或者希望由用户去确定的交给用户去处理。

如：自己封装的弹框组件底部不确定用户会放一个按钮还是两个按钮，就可以放入插槽，交给用户自己定。

单个插槽

在小程序中，默认情况下每个自定义组件中只允许使用一个插槽进行占位。

<!--components/MyTest2/index.wxml-->
<view>
  <text>components/MyTest2/index.wxml</text>
  <!-- 对于不确定的内容，可以使用slot进行占位，具体内容交给使用者确定 -->
  <slot></slot>
</view>

<my-test2>
  <!-- 这里的内容将被放到组件中<slot>的位置 -->
  <view>
    这里是slot里的内容
  </view>
</my-test2>

多插槽（具名插槽）

默认情况下，一个组件的 wxml 中只能有一个 slot 。需要使用多 slot 时，可以在组件 .js(不是在配置文件中) 中声明启用。

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多 slot 支持
  },
  // ... 省略其他
})

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

定义插槽

<view>
  <text>components/MyTest2/index.wxml</text>
  <!-- 对于不确定的内容，可以使用slot进行占位，具体内容交给使用者确定 -->
  <!-- <slot></slot> -->
  <slot name="before"></slot>
  <view>
    ---------这里是分割线--------
  </view>
  <slot name="after"></slot>
</view>

使用组件

<my-test2>
  <!-- 这里的内容将被放到组件中<slot>的位置 -->
  <!-- <view>
    这里是slot里的内容
  </view> -->
  <view slot="before">
    这里是before slot里的内容
  </view>
  <view slot="after">
    这里是after slot里的内容
  </view>
</my-test2>

自定义组件—生命周期

目标

掌握自定义组件生命周期。

组件生命周期-lifetimes

组件的生命周期，是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

生命周期	参数	描述
created	无	在组件实例刚刚被创建时执行，此时还不能调用 setData，一般用于给组件的this添加一些自定义的属性字段
attached	无	在组件实例进入页面节点树时执行，绝大多数初始化工作可以在这个时机进行，例如发请求获取初始数据
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
detached	无	在组件实例被从页面节点树移除时执行，适合做一些清理工作
error	Object Error	每当组件方法抛出错误时执行

lifetimes: {
    created() {
      console.log('组件被created') // 这里使用setData不会引起视图的更新
      this.setData({ msg: 'abc!' })
    },
    attached() {
      this.setData({ msg: 'abcd' })
    }
  }

自定义组件—生命周期-案例

自适应的自定义tabbar组件

背景

整个小程序中，全局配置中不启用自定义navBar，而在某个页面中使用自定义的navBar，此时，navBar默认会出现在页面的最顶部，如果需要正常显示出来，需要向下移动。

那具体要移动多少呢？不同的机型是不同的。

定义组件

<view class="navigate-bar" style="padding-top:20px">
  <view class="navigation-bar-title title-class">
    自定义标题
  </view>
</view>

.navigate-bar{
  text-align: center;
  line-height: 80rpx;
  height: 80rpx;
  background-color: green;
}

思路

在组件的生命钩子函数中，调用wx的getSystemInfoSync，拿到当前设备下，需要空出的距离，然后，就可以设置具体的下移距离啦。

核心代码

自定义组件-属性

在小程序中，properties是组件的对外属性，用于接收外界传递到组件中的数据，示例如下：

定义属性

Component({
	properties: {
    isOpen: Boolean,
  	min: Number, // 直接写类型
    max: {       // 写类型 + 初始值
    	type: Number,
      value: 10 // value用于指定默认值
    }
  }
})

从父组件中传入属性值

<my-test isOpen max="9" min="1" />
<my-test isOpen="{{true}}" max="9" min="1" />

  
<my-test isOpen="{{false}}" max="9" min="1" />
<my-test isOpen="false" max="9" min="1" />

查看或调试传入组件的数据

查看或调试传入组件的数据的查看方式如下图所示：

就先讲这么多吧,铁子们,下期见

小程序基础用法2