组件的创建与引用

创建组件

在项目的根目录，创建components 文件夹
在新建components的文件夹下新建组件文件夹，鼠标右键组件文件夹，点击新建component
之后组件文件夹会自动生成四个文件

局部引入组件

在页面的 .json 配置中引入组件

{
  "usingComponents":{
    "my-test1":"/components/test/test"
  }
}

全局引入组件

在app.json全局配置文件中引入组件

"usingComponents":{
  "my-test1":"/components/test2/test2"
}

区别

如果某组件只在特定的页面中被用到，建议进行“局部引用”
如果某组件在多个页面中经常被用到，建议进行“全局引用”
组件的 .json 文件中需要声明 “component”: true 属性
组件的 .js 文件中调用的是 Component() 函数
- 整个程序启动调用的是 App()
- 某个页面的渲染调用的是 Page()
- 某个组件的渲染调用的是 Component()
组件的事件处理函数需要定义到 methods 节点中

组件的样式

默认自定义组件样式只对当前组件生效，不会影响到组件之外的ui结构

修改组件隔离选项

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。

也可以在外界控制内部的样式，但需要修改隔离选项

// 在组件的.js 文件中新增加如下配置
Component({
  options: {
  // 默认值isolated: 代表启动样式隔离
  // apply-shared: 代表页面wxss样式将影响自定义组件
  // shared: 代表双向的影响
  styleIsolation: 'isolated'
  }
})
// 或在组件的.json 文件中新增加如下配置
{
  "styleIsolation": "isolated"
}

styleIsolation 的可选值

组件的数据，方法，属性

在小程序组件中，用于组件模板渲染的私有数据，需要定义到data节点中
在小程序组件中，事件处理函数和自定义方法需要定义到 methods节点中
在小程序组件中，properties 是组件的对外属性，用来接收外界（父组件）传递到组件中的数据
data和properties的区别
- data更倾向于存储组件的私有数据
- properties 更倾向于储存外界传递到组件中的数据
  - 不太建议修改properties的数据
  - 如要修改，最好通过子组件通信给父组件的方法实现

数据监听器

数据监听用于监听和响应任何属性和数据字段的变化

作用类型于vue中的watch侦听器

语法

Components({ 
// observers: 观察者 
  observers: { '字段A， 字段B': function(字段A的新值， 字段B的新值) {
         // do something 
     } 
})

组件的声明周期

最重要的就是 created , attached , ready , detached 。
1. 组件实例刚被创建好的时候， created 生命周期函数会被触发
  1. 此时调用setDate不会有效果
  2. 通常在这个声明周期函数中，只应用于给组件的this添加一些自定义属性字段
2. 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
  - 此时，this.data已经初始化完毕
  - 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
3. 在组件离开页面节点树后， detached 生命周期函数会被触发
  - 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
  - 此时适合做一些清理性质的工作,例如,清除定时器
4. 代表组件渲染完成的生命周期函数为 ready
  - 可以操作页面

在小程序组件中，生命周期可以直接定义在component构造器的第一级参数中，也可以在lifetimes字段进行声明

Component({ 
  // 推荐用法 
  lifetimes: { 
    attached() {}, // 在组件实例进入页面节点树时执行 
    detached() {}, // 在组建实例被从页面节点树移除时执行 
    } 
 })

微信小程序开发4