微信小程序自定义组件及数据监听器、生命周期、插槽、通信、Behaviors

开发技术 891 0 2023-04-14

微信小程序自定义组件及数据监听器、生命周期、插槽、通信、Behaviors

一、自定义组件

1、创建组件
在项目的根目录中鼠标右键,创建文件夹名为components,在components文件夹上右键创建组件名为test文件夹,然后在test文件夹上右键新建 component弹出窗口输入组件名test回车即可自动创建后缀名分别为 js,json,.wxml和wxss,如下图显示:

2、引用组件

组件的引用方式分为“局部引用”即:只能在当前被引用的页面内使用,“全局引用”即:组件可以在每个小程序页面中使用。

引用组件方法:在配置文件.json中usingComponents引入组件,如下图所示:

以上示例引入了三个组件,分别为:my-test1、my-test2、my-test3

在页面中使用组件,如:<my-test1></my-test1>

3、组件和页面的区别

从表面来看,组件和页面都是由 .js、.json、.wxml和wxss 这四个文件组成的。但是,组件和页面的,js 与json 文件有明显的不同:
① 组件的.json 文件中需要声明"component": true 属性
② 组件的.js 文件中调用的是 Component() 函数而不是pages()
③ 组件的事件处理函数需要定义到 methods 节点中

4、组件样式的隔离

默认情况下,自定义组件的样式只对当前组件生效,不会影响到组件之外的UI 结构,但如果要想外界能够控制组件样式,那我们需要在.js文件中设置stylelsolation值,如下图:

其中可选择值如下:

isolated:表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响。

apply-shared:表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面。

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

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

5、组件数据、属性和方法
数据一般写在data里,如是接收外界传来的数据建议写在properties里,比如
在页面中使用组件<my-test1 max="10"></my-test1>,传值max=10,那在组件中接收传值为:

上面声明了一个max,类型为数字,默认值为5

6、纯字段或是方法

纯字段指提不做任何渲染只做内部逻辑用,所以建议使用下划线_来定义,好处是提高效率,如示例:

Component({
  options:{
    pureDataPattern: /^_/
  },
  data: {
    _rgb: { r: 0, g: 0,  b: 0 },
    fullColor: '0, 0, 0'
  },
  methods: {
    changeR(){
      this.setData({
        '_rgb.r': this._changeColor(this.data._rgb.r)
      })
    },
    changeG(){
      this.setData({
        '_rgb.g': this._changeColor(this.data._rgb.g)
      })
    },
    changeB(){
      this.setData({
        '_rgb.b': this._changeColor(this.data._rgb.b)
      })
    },
    _changeColor(value) {
      return value + 5 > 255 ? 255 : value + 5
    }
  }
})


二、数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化,从而执行特定的操作。它的作用类似于 vue 中的watch 侦听器。在小程序组件中,数据监听器的基本语法格式如下:

如果是监听对象我们可以写成 "obj.a, obj.b, obj.c, ...":function(a,b,c){} 或 "obj.**":function(obj){}


三、生命周期

组件中可用的生命周期函数如下图:

组件生命周期函数都放在lifetimes下,如示例代码:

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

在自定义组件中,组件所在页面的生命周期函数有如下3个,分别是:
show:组件所在的页面被展示时执行。
hide:组件所在的页面被隐藏时执行。
resize:组件所在的页面尺寸变化时执行。

如下示例代码:


四、插槽

在自定义组件的 wxml结构中,可以提供一个 <slot> 节点(插槽)占位,用于承载组件使用者提供的 wxml结构。

单个插槽使用示例:

在组件页面中定义一个插槽:
<slot></slot>

在页面中使用插槽:
<my-test1>
这是单个插槽使用
</my-test1>


多个插槽使用,先在js文件里启用多插槽,

 options:{

   multipleSlots:true

 },

使用示例:

在组件中定义多个插槽:
<slot name="before"></slot>
<slot name="after"></slot>

在页面中使用多个插槽:
<my-test2>
  <view slot="before">这是插槽before里的内容</view>
  <view slot="after">~~~~~~~~~~~~~~</view>
</my-test2>


五、通信

父子组件之间通信有3种方式
1、属性绑定:用于父组件向子组件的指定属性设置数据,仅能设置JSON兼容的数据。

2、事件绑定:用于子组件向父组件传递数据,可以传递任意数据。

①在父组件的js 中,定义一个函数,这个函数即将通过自定义事件的形式,传递给子组件;

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

③在子组件的 js 中,通过调用 thistriggerEvent('自定义事件名称',{/*参数对象*/}),将数据发送到父组件;

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

3、获取组件实例:父组件还可以通过 this.selectComponent()获取子组件实例对象,这样就可以直接访问子组件的任意数据和方法。


六、Behaviors的定义和使用

behaviors是小程序中,用于实现组件间代码共享的特性,类似于Vue.is 中的“mixins”。

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

创建实例:

引入:

const myBehaviors = require('../../behaviors/my-behaviors')

Component({

behaviors: [myBehaviors],

//......

})


上一篇:微信小程序实现上拉加载数据、下拉刷新、分页功能

下一篇:常用 electron 进程 API

讨论数量:0

请先登录再发表讨论。 2024-05-20

天涯网魂
3 杠 5 星
TA 的文章
TA 的随言
TA 的资源链