微信小程序-组件

自定义组件-组件的创建与引用

     1.创建组件 

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

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

        ③ 键入组件的名称之后回车，会自动生成组件对应的4 个文件，后缀分别为 .js, .json, .wxml和 .wxss

      2.引用组件

       组件的引用方式为 “局部引用” 和“全局引用”，顾名思义：

   ·局部引用：组件只能在当前被引用的页面内使用

        在页面的 .json 配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

   //在页面的 .json 文件中，引入组件 

"usingComponents": {

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

    }

//在页面的 .wxml 文件中，使用组件

<my-test1></my-test1>

   

·全局引用： 组件在每个小程序页面内使用

 在 app.json 全局配置文件中引用组件的方式，叫做“全局引用”。示例代码如下：

//在app.json 文件中，跟Pages节点评级 ，键入 

"usingComponents": {

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

    }

//在页面的 .wxml 文件中，使用组件

<my-test1></my-test1>

全局引用 VS 局部引用

根据组件的使用频率和范围，来选择合适的引用方式：

    ①如果某组在多个页面中经常被用到，建议进行“全局引用”

     ②如果某个组件只在特定的页面中被用到，建议进行“局部引用”

组件和页面的区别

  ·组件的.json 文件中需要声明"component":true属性

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

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

---

自定义组件-样式

1.组件样式隔离

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

   ·组件 A 的样式不会影响组件 C 的样式

   ·组件 A 的样式不会影响小程序页面样式

   ·小程序页面的样式不会影响组件 A 和 C 的样式

  好处：

  ①防止外界的样式影响组件的内部样式

  ②防止组件的样式破坏外界的样式

2.组件样式隔离的 注意点

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

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

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

3.修改组件的样式隔离选项

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

//在组件的 .js 文件中新增如下配置

Component({

    options:{

        styleIsolation:"isolated"

    }  

})

//或者在 组件.json 文件中新增如下配置

{

"styleIsolation":"isolated"

}

styleIsolation 的 可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但自定义组件wxss中指定样式不会影响页面
shared	否	表示页面wxss样式将影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置 apply-shared 或 shared 的自定义组件

---

自定义组件-数据、方法和属性

数据、方法

data: {

        count : 0

    },

    /**

     * 组件的方法列表

     */

    methods: {

       addCount(){ 

           this.setData({count:this.data.count +1})

           this._showCount()

       },

       _showCount(){

            wx.showToast({

            title: 'count值为：' + this.data.count,

            icon: 'none'

           })

       }

    }

属性

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

 properties: {

        //第一种方式

        max:Number,

        //第二种方式，可以指定默认值

        max:{

            type :Number,

            value:10

        }

    },

//外界传参方式

<my-test max = "10"></my-test>

4.data和properties 的区别

    在小程序组件中，properties 属性和 data 数据的用法相同，他们都是可读 可写 的，只不过：

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

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

5.使用setData 修改 properties

    由于 data 数据 和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于渲染，或使用setData为properties 中的属性重新赋值，示例代码如下：

this.setData({max:this.properties.max +1})

---

自定义组件-数据监听

    概念：数据监听器用于监听和相应任何属性和数据字段的变化，从而执行特定的操作。语法格式如下：

页面的示例：

<view>{{n1}}+{{n2}} = {{sum}}</view>

<button bindtap = "addN1">{{n1}}+1</button>

<button bindtap = "addN2">{{n2}}+1</button>

函数写法：

methods: {

       addN1(){

          this.setData({

              n1:this.data.n1+1

          })

       },

       addN2(){

         this.setData({

             n2:this.data.n2+1

         })

      }

    }

监听写法：

    observers:{

        'n1, n2':function(newN1,newN2){

          this.setData({

              sum:newN1+newN2

          })

        }

    }

监听对象属性的变化：

observers:{

        '对象.属性A,对象.属性B':function(属性A的新值,属性B的新值){

        //触发此监听的 3 种情况：

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

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

        //【直接为对象赋值】使用setData 设置 this.data.对象 时触发

        //do something...

        }

    }

代码样例：

在wxml文件中：

<view style="background-color: rgb({{fullColor}});" class = "colorBox">颜色值：{{fullColor}}</view>

<button size = "mini" type="defualt" bindtap = "changeR">R</button>

<button size = "mini" type="primary" bindtap ="changeG">G</button>

<button size = "mini" type="warn" bindtap = "changeB">B</button>

<view>{{rgb.r}},{{rgb.g}},{{rgb.b}}</view>

js代码：

data: {

        rgb:{r:0,g:0,b:0},

        fullColor:'0,0,0'

    },

    /**

     * 组件的方法列表

     */

    methods: {

     changeR(){

         this.setData({'rgb.r':this.data.rgb.r + 5 > 255 ? 255 : this.data.rgb.r + 5})

     },

     changeG(){

        this.setData({'rgb.g':this.data.rgb.g + 5 > 255 ? 255 : this.data.rgb.g + 5})

     },

     changeB(){

        this.setData({'rgb.b':this.data.rgb.b + 5 > 255 ? 255 : this.data.rgb.b + 5})

     },

    },

    observers : {

        'rgb.r,rgb.g,rgb.b':function(r,g,b){

            this.setData({fullColor : `${r},${g},${b}`})

        }

    }

监听对象中所有对象的变化：

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化，示例：

 observers : {

        'rgb.**':function(obj){

            this.setData({fullColor : `${obj.r},${obj.g},${obj.b}`})

        }

    }

自定义组件-纯数据字段

概念：纯数据字段指的是那些不用于界面渲染的data 字段。

应用场景：例如有些情况下，某些 data 中的字段不会展示在界面上，也不会传递给其他组件，仅仅在当前 组件内部使用。带有这种特性的data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于 提升页面更新性能

Component({

    options :{

//指定所有_开头的数据字段为纯数据字段

        pureDataPattern:/^_/ //正则表达式

    },

    data :{

        a:true,//普通数据字段

        _b:true,//纯数据字段

    }

})  

---

自定义组件-组件生命周期

生命周期函数	参数	描述说明
created	无	在组件实例刚刚被创建时执行
attached	无	在组件实例进入页面节点树时执行
ready	无	在组件视图层布局完成后执行
moved	无	在组件实例被移动到节点书另一个位置时执行
detached	无	在组件实例被从页面节点移除时执行
error	Object Error	每当组件方法抛出错误时执行

组件的主要生生命周期函数

在小程序中，最重要的生命周期函数有3 个，分别是 created、attached、deached，它们各自的特点如下：

① 组件实例刚被创建好的时候， created 生命周期函数会被触发

   ·此时还不能调用setData

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

②在组件 完全初始化完毕，进入页面节点树后， attached 生命周期函数会被触发

   ·此时，this.data 已被初始化完毕

   ·这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发起请求获取初始数据）

③在组件离开页面节点后， detached 生命周期函数会被触发

    ·退出一个页面时，会触发页面内每个自定义组件的 detached生命周期函数

   ·此时适合做一些清理性质的工作

在 lifetimes 节点声明，生命周期函数

    在小程序组件中，生命周期函数可以直接定义在Component 构造器的第一级参数中，可以在lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）

---

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

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

例如：每当触发页面的show生命周期函数的时候，我们希望能够重新生成一个随机的RGB 颜色值。

在自定义组件中，组件所在页面的生命周期函数有如下 3 个

生命周期函数	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	Object Size	组件所在的页面尺寸变化时执行

在组件的.js 文件夹中加入 pageLifetimes 节点，跟methods,data平级

pageLifetimes:{

     show(){

        console.log('show');

     },

     hide(){

        console.log('hide');

     },

     resize(){

        console.log('resize');

     }

  }

---

自定义组件-插槽

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

作为组件的封装者，不知道组件的某一部分要填写什么内容，此时，可以把这部分用一个插槽占位，插槽是占位符

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

用法：在组件的 .wxml 页面中加入<slot></slot>

<view>

    <view>这里是组件的内部结构</view>

    <!--插槽：-->

   <slot></slot>

</view>

在调用组件的页面,向插槽填充内容

<my-test4>

   <view>这是通过插槽填充的内容</view>

</my-test4>

最终效果：

---------------------------------------------------

启用多个插槽：

在 组件 .js 文件中找到 options{} 节点，如果没有，自行新增，加入下列属性：

options:{

  multipleSlots:true /**启用多个插槽 */

 }       

可以在组件 .wxml中使用 多个<slot>插槽， 以不同的name 来区分不同的插槽。要指定向哪个插槽填充，示例如下：

在组件的 .wxml 页面中

<view>

   <!--注意：name 名字随便取-->

    <slot name = "before"></slot>

    <view>这里是组件的内部结构</view>

    <!--插槽：-->

   <slot name = "after"></slot>

</view>

在调用组件的页面 写法，填充顺序没有要求

<my-test4>

   <view slot = "before">这是插槽填充到了组件before里</view>

   <view slot = "after">这是插槽填充到了组件after里</view>

</my-test4>

效果：

---

自定义组件-父子组件之间的通信

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

①属性绑定

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

②事件绑定

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

③获取组件实例

     ·父组件还可以通过this.selectComponent()获取子组件实例对象

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

属性绑定：

在父页面 js 里：

data: { 

       count:0

    }

在 wxml 里

<my-test5 count="{{count}}"></my-test5>

<rich-text style="color: red">引用test5-父子组件通信：</rich-text>

<view> 父组件中：count值是{{count}}</view>

在组件中.js文件，properties 属性，定义一个属性，用来接受父页面的count

 properties: {

    count : Number

 }

事件绑定：

事件绑定用于实现 子组件向父传值，可以传递任何类型的数据。使用步骤如下：

①在 父组件的 .js中，定义一个函数，这个函数即将通过自定义事件的形式，传递给子组件，e是形参

   syncCount(e) {

    }

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

< my-test5  bind:sync = " syncCount "></ my-test5 >

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

this . triggerEvent ( ' sync ' ,{ value :1234 } )

④在 父组件的js 中，通过 e.detail 获取到子组件传递过来的数据

syncCount(e) {

      this.setData({

         console.log(e.detail.value)

      })

    }

获取组件实例：

可在父组件里调用 this.selectComponent("id或者class选择器")，获取子组件的示例对象，从而直接访问子组件任意数据和方法。调用时需要传入有一个选择器，例如 this.selectComponent(".my-component")。

 getchild(){

        const child = this.selectComponent('.customA')

        child.setData({

            count:child.properties.count+1

        })

    }

---

自定义组件中的-behaviors

behaviors 的工作方式：

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

每个组件可以引用多个behavior ，behavior 也可以引用其他 behavior

创建behavior

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

导入并使用behaviors

在组件中，使用require()方法导入需要的 behaviors,挂载后即可访问behaviors 中的数据或方法，示例代码如下：

定义一个文件夹 和 文件 ：

文件中写入

module.exports = Behavior({

    data:{

        username:"sd"

    },

    properties:{},

    methods:{

    }

})

在用到behavior的页面 .js文件引入behavior

const  myBehavior = require('../../behaviors/my-behavior')

Component({

    behaviors : [myBehavior]

})

在用到behavior的页面 .wxml 文件

< view > 在behavior中定义的用户名是： {{ username }}</ view >

behavior 中所有可用节点：

可用节点	类型	是否必填	描述
properties	Object Map	否	同组件的属性
data	Object	否	同组件的数据
methods	Object	否	同自定义组件的方法
behaviors	String Array	否	引入其他的behaviors
created	Function	否	生命周期函数
attached	Function	否	生命周期函数
ready	Function	否	生命周期函数
moved	Function	否	生命周期函数
detached	Function	否	生命周期函数

同名字段的覆盖个组合规则

behaviors | 微信开放文档 (qq.com)