小程序~~3（自定义组件）

目录

1.自定义组件

创建和注册组件

数据和方法

属性properties

组件wxml的slot-插槽（难）

组件样式以及注意事项（难）

组件样式隔离（难）

修改checkbox样式（难）

数据监听函数observes

父往子传值

子往父传值

获取组件实例

组件生命周期

组件所在页面的生命周期

小程序生命周期总结

使用Component构造页面

组件复用机制behaviors

外部样式类

---

1.自定义组件

创建和注册组件

公共组件

在目录下新建文件夹components-在该文件夹下创建想要组件的文件夹-在该文件夹下新建component-在app.json文件中的"usingComponent"方法中添加组件的路径

页面组件

在页面下新建文件夹-在文件夹中新建组件-在页面的.json文件中的"usingComponent"方法中添加组件的路径

全局注册后可以在任意页面使用，局部注册只能在当前页面使用

在组件注册完成后，直接将组件名当成组件标签名即可

数据和方法

组件的数据和方法需要在组件.js的Component方法中定义

data定义组件的内部函数

methods 写事件处理函数

属性properties

properties是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和data一同用于组件的模块渲染

想要获取属性值，在methods方法中打印this.properties.value()

组件wxml的slot-插槽（难）

使用组件时，可以在组件中间写子节点，从而展示子节点中的内容，自定义组件要想接收子节点需要在模板中定义<slot/>节点，用于承载组件中间的子节点

默认情况下，一个组件的wxml中只能有一个slot，需要多个插槽时要在组件的js文件中声明options函数，在其中添加mutipleSlot属性

使用多个组件的时候，要给slot添加name属性来区分不同的slot，而在组件使用者中可根据slot名来传递内容

在同时拥有插槽和label值，可进行判断选择以哪种方式呈现文本值

slot插槽多的时候要命名，可以使用默认插槽，注意放置的位置

组件样式以及注意事项（难）

组件样式隔离（难）

isolated  样式隔离，自定义组件和组件使用者样式不会相互影响

apply-shared  组件使用者、页面中的wxss样式会影响到组件，但是定义在组件身上的样式不会影响到那二者

shared   组件使用者、页面中的wxss样式和定义在组件身上的样式会相互影响

修改checkbox样式（难）

复选框是公共组件

修改复选框，首先要在小程序开发文档中找到小程序提供的类名

在自定义组件中，想要修改复选框，首先要设置styleIsolation:'shared'属性，之后再进行修改

数据监听函数observes

可以在组件使用页面传递一个标签，也可以进行监听，与其他监听不同的是，它的数据不改变也能监听到，而其它情况只有数据改变才能监听到

监听单个数据,key数据对象，value回调函数里面放返回的新数据

监听多个函数，使用字符串的形式来选择数据，中间用逗号隔开，返回新值

监听对象内部属性的变化，使用通配符'对象.**'来监听对象的全部属性

父往子传值

子往父传值

在自定义组件的methods方法中通过this.triggerEvent('绑定事件函数',数据)，在组件使用者的.wxml文件中的组件标签中通过bind绑定事件处理函数，并在组件使用者的.js文件中通过函数获取组件传递过来的数据

组件使用者绑定的函数是其在.js文件中接收数据的函数

获取组件实例

组件使用者可以在js文件中通过this.selectComponent方法，获取子组件实例对象，这样可以直接访问子组件的任何数据和方法

this.selectComponent()中放的是给子组件标签中命名的类选择器或者id选择器名

组件生命周期

组件的生命周期，指的是组件自身的一些钩子函数，这些函数在特定的时间节点被自动触发

组件的生命周期函数需要在lifetimes字段中声明

组件的生命周期函数有5个：created  attached   detached  ready moved

created 是组件实例创建完毕后执行，在该函数中不能使用setData,但可以通过this的方式给组件添加一些属性，如this.test:'测试'在attched函数中中就能打印出数据

attached   模板解析完成挂载到页面上时启动，在该函数中可放置setData，并打印组件的一些属性

detached  组件被销毁时执行

组件所在页面的生命周期

组件所在页面的生命周期需要在pageLifetimes字段中进行声明

主要的是小程序页面展示show(){}和页面隐藏hide(){}

小程序生命周期总结

使用Component构造页面

使用Component构造页面，要求对应的.json文件中包含usingComponents的定义段，页面Page中的一些生命周期方法（如onLoad()等以"on"开头的方法），在Component中要写在methods中才能生效

组件的属性Properties可以用于接受页面的参数，在onLoad()中可以通过this.data拿到对应的页面参数

组件复用机制behaviors

为了实现代码的复用，可以写一个behaviors.js文件来放置重复的内容，其中需要使用到Behavior({})方法，将重复的数据放进去，每个behavior可以包含一组属性、数据、生命周期函数和方法。在创建的时候可以给Behavior({})赋值给一个变量，在后续使用的时候可以直接用变量名，在Behavior({})方法之后要暴露出数据，写上“export default behavior”

在调用behaviors.js文件的时候要现在该页面的.js文件中导入，之后在Component({})中引入方法，注意behaviors是一个数组（还要注意调用的时候是behaviors，创建的时候是behavior）

当组件和它引用的behavior中包含同名的字段时，处理方法如下：

如果存在相同的properties，组件中的内容会覆盖掉behavior中的内容

如果存在相同的data且是对象类型（object），同名的数据字段，组件的会覆盖behavior的，如果组件中没有某个内容而behavior中有，那么两者会相互融合在一起

生命周期函数，每个都会执行，不会彼此覆盖

外部样式类

在Component中用extemalClasses定义外部样式类

先在组件使用者的标签中定义好类名，<custom09 extend-class="my-class"/>，后面在组件使用者的.wxss文件中设置样式属性用的也是my-class，但是在组件的.wxml文件中写的是<view class="extend-class">修改组件样式</view>，并且在Component中写的是extemalClasses:['extend-class']（注意什么时候写什么类名）

在同一个节点上使用普通样式类和外部样式类时，两个类的优先级未知，可以添加!important来保证外部样式类的优先级

还要注意的是如果styleIsolation属性是shared，那么外部样式类会失效