微信小程序--自定义组件（超详细 从新建到使用）_微信小程序自定义组件如何使用

微信小程序–自定义组件

微信小程序官网介绍！

本文提供给急需使用自定义组件人群，以下是博主个人理解和案例！可以辅助官网来看

介绍：

从小程序基础库版本 1.6.3 开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本 1.6.3 或更高。
开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用；也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。自定义组件在使用时与基础组件非常相似。

一.自定义组件（创建-使用）

1.创建自定义组件

类似页面，一个自定义组件由json ,wxml,wxss,js 4个文件组成

1、在根目录下自定义一个components文件夹，用来存放自定义的组件。

2、再针对每一个组件创建一个文件夹，用来存放这个组件相关的文件。、

新建components文件夹

文件分类

组件新建Components（新建components的才是组件）

在这里插入图片描述

2.声明组件

在需要引入组件的页面的json文件中，在usingComponents里面写键值对，写组件名和路径

{
    "usingComponents": {
    //引用组件
        "cell": "/components/cell/cell",
        "item": "/components/item/item"
    }
}
1
2
3
4
5
6
7

3.使用组件

在需要引入组件的页面的wxml文件中，添加组件标签

<item>使用item自定义组件</item>
1

效果：

二， 自定义组件Component

生命周期：lifetimes
组件的挂载： attach
数据：data
方法：methods
属性（只读）：properties
外部类：externalClasses
选项：options
多个插槽：multipleSlots:true
组件的样式格式： styleIsolation:“isolated”

三，组件的样式

组件对应 wxss 文件的样式，只对组件 wxml 内的节点生效。编写组件样式时，需要注意以下几点：

1，组件和引用组件的页面不能使用 id 选择器（#a）、属性选择器（[a]）和标签名选择器，请改用 class 选择器。
2，组件和引用组件的页面中使用后代选择器（.a .b）在一些极端情况下会有非预期的表现，如遇，请避免使用。
3，子元素选择器（.a>.b）只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
4，继承样式，如 font 、 color ，会从组件外继承到组件内。
5，除继承样式外， app.wxss 中的样式、组件所在页面的的样式对自定义组件无效（除非更改组件样式隔离选项）。
除此以外，组件可以指定它所在节点的默认样式，使用 :host 选择器（需要包含基础库 1.7.2 或更高版本的开发者工具支持）。

1，样式的隔离

组件：cell.js

// components/cell/cell.js
Component({
  // 选项：
  options:{
    // 样式隔离：apply-shared 父影响子，shared父子相互影响， isolated相互隔离
    styleIsolation:"isolated",
    // 允许多个插槽
    multipleSlots:true,
  },
1
2
3
4
5
6
7
8
9

options —— 样式隔离

styleIsolation : " 值 ",

值：
apply-shared ：父影响子
shared：父子相互影响
isolated：相互隔离

2，externalClasses ——外部类

  // 通过组件的外部类实现父组件控制子自己的样式
  externalClasses:["cell-class"],
1
2

在组件：cell.js 中定义外部类

<view class="cell cell-class">我是cell组件</view>
1

使用组件

<cell cell-class="mycell"></cell>
1

在页面设组件样式

.mycell{
  line-height: 120rpx !important;
  color:#F70;
}
1
2
3
4

四，组件的插槽

1，默认插槽

父组件

<cell>
      <text>插槽内容</text>
</cell>
1
2
3

子组件

<view><slot></slot></view>
1

2，命名多插槽

父组件com.wxml（页面）

<cell>
    <text slot="pre">          本文内容由网友自发贡献，转载请注明出处：【wpsshop博客】