小程序day7

自定义组件

1:组件的创建

1：在项目的根目录中，鼠标右键，创建component --> test文件夹

2：在新建的component --> test文件夹上，鼠标右键，点击“新建Component”

3：回车后会自动生成组件对应的4个文件，后缀名为 .js .json .wxml .wxss

2：引用组件

分为全局引用和局部引用

一：局部引用

在页面的.json文件中引用组件的方式叫局部引用。

引入组件

{

          "usingComponents": {

                   "my-test1":"/components/test/test"

          }

}

使用组件

<my-test1></my-test>

二：全局引用

在app.json全局配置文件中引用组件的方式叫全局引用

大致用法同上

注意：组件要是经常被引用到，建议用全局引用。

三：组件和页面的区别

虽然组件和页面都是由 .js  .json  .wxml  .wxss组成的。但是他们的.js和.json文件有明显的不同

a：组件的.json文件都需要声明“component”:true属性

b：组件的.js文件中调用的是Component()函数

c：组件的事件处理函数需要定义到methods节点中

3：自定义组件——样式

一：组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之为的UI结构

注意：

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

        ·只有class选择器会有隔离效果，id，属性，标签选择器不受影响

二：修改组件的样式隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件外部样式互相干扰的问题，但是有时候我们希望在外界能够控制组件内部的样式，可以通过stylelsolation修改组件的样式隔离选项

在.js文件中设置隔离选项

        Component({

                options:{

                            styleIsolation:"isolated"

                }        

        })

styleIsolation可选值

isolated                启用样式隔离，在自定义组件内外，使用class指定的样式不会相互影响

apply-shared        页面wxss样式将影响到自定义组件，但自定义组件的wxss不会影响到页面

shared                   页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件

在.json文件中设置隔离选项

4：自定义组件的数据，方法和属性

一：data数据

在组件中，用于模板渲染的私有数据，需要定义到data节点中，

Component({

          data:{

                    conut:0

         },

})

二：methods方法

在组件中，事件处理函数和自定义方法需要定义到methods节点中

methods：{

        函数名（）{

        }

}

三：prooerties属性

在组件中，properties是组件的对外属性，用来接收外界传递到组件的数据

注意：prooerties和data区别

1，data更倾向于存储组件的私有数据

     properties更倾向于存储外界传递到组件中的数据

2：data数据和properties属性在本质上没有任何区别因此properties属性的值也可以渲染页面或者用setData为properties重新赋值

4：observers自定义组件-数据监听

监听和响应任何属性和数据字段的变化，从而执行特定的操作，类似于vue中的watch

一:监听数据的变化

observers:{

            '字段1,字段2':function(字段1新值,字段2新值){             

            }

  }

当数据发生变化时触发函数

代码例子

 

 二：监听对象属性的变化

数据监听器支持监听对象中的单个或多个属性变化

 触发此监听器的3种情况

1：【为属性A赋值】，使用setData设置this.data.对象.属性A时触发；

2：【为属性B赋值】，使用setData设置this.data.对象.属性B时触发；

3：【直接对对象赋值】，使用setData设置this.data.对象时触发；

注意：如果这个对象的属性来多了怎么办

监听对象中所有属性的变化

使用通配符**来监听对象中所有属性的变化

observers:{

            '对象.**':function(obj){             

            }

  }

5：自定义组件-纯数据字段

纯数据字段指不用于界面渲染的data字段

应用场景：某些data中的字段既不会展示在界面上，也不会传递给其他组件，仅当组件欸不使用，待遇这种特性的data字段适合被设置为纯数据字段

优点;有助于提升页面更新的性能

使用规则：在Component构造器的options节点中，指定pureDataPattern为一个正则表达式，字段符合这个正则表达式的为纯数据字段

6：自定义组件-组件的生命周期

一：组件的全部生命周期

created                组件实例刚刚被创建时执行                                被创建但未放到页面节点

attached              组件实例进入页面节点树时执行                        放到页面节点但未渲染

ready                   组件在视图层布局完成后执行                                渲染完成后

moved                  在组件实例被移动到节点树的另一个位置时执行     组件在页面发生位置变化

detached               在组件实例被从页面节点树移除时执行                   组件销毁时

error              参数：Object Error                  每当组件方法抛出错误时执行

二：组件主要的生命周期created，attached，detached

1：created。组件实例刚被创建好时会触发

        此时还不能调用seyData

        通常在这个生命周期函数中，只应该给组件的this添加一些自定义的属性字段

2：attached。组件实例刚被创建好时会触发

        此时，this。setdata已被初始化完毕

        绝大多数的初始化的工作都可以在这个时候运行（如发送请求获取初始数据）

2：detached。组件实例刚被创建好时会触发

        退出一个页面时，会触发

        此时适合做一些清理类的解绑类的工作

三：定义生命周期函数

生命周期函数可以定义在Component构造器的第一级节点中，也可以在lifetimes字段内声明（比较推荐此方式声明，其优先级最高）

7：自定义组件-组件所在页面的生命周期

有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期函数

一：组件所在页面的生命周期函数

show                组件所在页面被展示时执行

hied                 组件所在页面被隐藏时执行

resize        参数：Object Size  组件所在页面尺寸发生变化时

二：pageLifetimes，在组件监听所在页面生命周期函数

8：自定义组件-插槽

一：插槽占位

在自定义wxml结构中，可以提供一个<slot>节点（插槽），用于承载组件使用者提供的wxml结构

 二：单个插槽

默认每一个自定义组件中只允许使用一个<slot>进行占位，这种数量上的限制叫单个插槽

 二：多个个插槽

启用：在组件的.js文件中的Component——>options——>multipleSiots：true

定义：在组件wxml结构中定义多个<slot>标签,以不同的name区分

 使用：带有多个插槽的自定义组件时，使用表签的slot属性来指定插槽

9：自定义组件-组件通信

一:父子组件之间的通信的3种方式

1：属性绑定

        用父组件向子组件的指定属性设置数据，仅能设置json兼容的数据

        用于父向子传递普通的数据类型，无法传递方法

父组件

 子组件内部用properties节点声明对应的属性并使用

 

 

 

 

2：事件绑定

子组件向父组件传递数据，可以传递任意数据

步骤：1：在父组件的js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件

 

           2：在父组件的wxml中，通过自定义事件的形式，将步骤1中定义的函数引用，传递给子组件

 

          3：在子组件的js中，通过调用this.triggerEvent('自定义事件名称'，{/*参数对象*/})，将数据发送到父组件

 

          4：在父组件的js中，通过e.detal获取子组件传递过来的数据

 

 

3：获取组件实例

        父组件还可以通过this.selectComponent(”id或者class选择器“)获取子组件实例对象

        这样可以直接访问子组件的任意数据和方法

 

 

10：自定义组件-behaviors

用于实现组件之间代码共享的特性

behaviors的工作方式

在behaviors中可以包含一组属性，方法，生命周期函数和数据。组件引用他时它的属性，数据和方法会被合并到组件中

每个组件可以引用多个behaviors，behaviors中也可以引用其他的behaviors

一：创建behavior

调用Behavior（Object object ）方法即可创建一个共享的behaviors实例对象，供所有组件使用

  二：导入使用behavior

使用require()方法导入需要的behavior，挂载后即可访问behaviors中的数据和方法

三：behavior可用的节点

 四：同名字段的覆盖和组合规则*

组件和他的behavior中可以包含同名的字段，此时可以参考如下3种处理规则

同名的数据字段（data）

同名的属性（properties）或方法（methods）

同名的生命周期函数

详细参考官方文档