微信小程序-day4

小程序中的组件

局部注册

在页面的.json中使用usingComponents来注册使用组件

javascript 复制代码

  "usingComponents": {
      "text1": "/components/text/text"
  }

全局注册

在app.json中使用usingComponents

组件和页面的区别

从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同：

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

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

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

组件的样式

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，小程序页面的样式也不会影响组件的样式

组件样式隔离的注意点

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

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

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

styleIsolation****的可选值

methods

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

properties

类比props

与vue不同，在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的

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

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

this.data === this.properties 的结果是true，两者指向同一个对象

数据监听器

监听的基础用法

监听对象属性变化

纯数据字段

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

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

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

自定义组件的生命周期

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

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

此时还不能调用 setData

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

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

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

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

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

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

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

lifetimes节点

生命周期方法可以直接定义在 Component 构造器的第一级参数中。

自小程序基础库版本 2.2.3 起，组件的的生命周期也可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

javascript 复制代码

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  // 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
  attached: function() {
    // 在组件实例进入页面节点树时执行
  },
  detached: function() {
    // 在组件实例被从页面节点树移除时执行
  },
  // ...
})