微信小程序详解(7.自定义组件:Component 和 应用生命周期 页面生命周期)
介绍:
首先,我们要明白,自定义组件是什么东西,能干什么,
那么.既然是自定义组件,那么当然是自己定义的一个模块封装后,这个模块就叫做自定义组件,我们可以写多个功能不同的自定义组件,当我们需要使用时,只需要把它们引入到我们的项目中就可以直接使用了,极大的方便了我们的项目搭建和功能完善,并且使项目耦合降低，可读性强和维护性成本降低.
步骤:
1.创建一个自定义的文件夹,这个就不多做描述,直接在文件中和pages同级的位置创建一个自定义的文件,然后保存, 他就自动生成了
(注意:这个方式只有在微信小程序中使用时才会自动生成)
2.创建自定义组件后接受一个 Object 类型的参数。
参数
Object object
生成的组件实例可以在组件的方法、生命周期函数和属性 observer 中通过 this 访问。组件包含一些通用属性和方法。
Component({
behaviors: [],
// 属性定义（详情参见下文）
properties: {
myProperty: {
// 属性名
type: String,
value: ''
},
myProperty2: String
// 简化的定义方式
}, data: {},
// 私有数据，可用于模板渲染
lifetimes: {
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { }, moved: function () { }, detached: function () { },
},
// 生命周期函数，可以为函数，或一个在methods段中定义的方法名
attached: function () { },
// 此处attached的声明会被lifetimes字段中的声明覆盖
ready: function () { }, pageLifetimes: {
// 组件所在页面的生命周期函数
show: function () { },
hide: function () { },
resize: function () { },
},
methods: {
onMyButtonTap: function () {
this.setData({
// 更新属性和数据的方法与更新页面数据的方法类似
})
},
// 内部方法建议以下划线开头
_myPrivateMethod: function () {
// 这里将 data.A[0].B 设为 'myPrivateData'
this.setData({ 'A[0].B': 'myPrivateData' })
}, _propertyChange: function (newVal, oldVal) { }
}
})(注意:在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name=“attr value”），应用于数据绑定时采用驼峰写法（attr=""）)
属性值的改变情况可以使用 observer 来监听。目前，在新版本基础库中不推荐使用这个字段，而是使用 Component 构造器的 observers 字段代替，它更加强大且性能更好。
Component({
properties: {
min: { type: Number, value: 0 }, min: {
type: Number, value: 0, observer: function (newVal, oldVal) {
// 属性值变化时执行
}
},
lastLeaf: {
// 这个属性可以是 Number 、 String 、 Boolean 三种类型中的一种
type: Number,
optionalTypes: [String, Object],
value: 0
}
}
})属性的类型可以为 String Number Boolean Object Array 其一，也可以为 null 表示不限制类型。
多数情况下，属性最好指定一个确切的类型。这样，在 WXML 中以字面量指定属性值时，值可以获得一个确切的类型.
Bug & Tips:
使用 this.data 可以获取内部数据和属性值；但直接修改它不会将变更应用到界面上，应使用 setData 修改。
生命周期函数无法在组件方法中通过 this 访问到。
属性名应避免以 data 开头，即不要命名成 dataXyz 这样的形式，因为在 WXML 中， data-xyz=""会被作为节点 dataset 来处理，而不是组件属性。
在一个组件的定义和使用时，组件的属性名和 data
字段相互间都不能冲突（尽管它们位于不同的定义段中）。从基础库 2.0.9 开始，对象类型的属性和 data
字段中可以包含函数类型的子字段，即可以通过对象类型的属性字段来传递函数。低于这一版本的基础库不支持这一特性。bug : 位于 slot 中的自定义组件没有触发 pageLifetimes 中声明的页面生命周期，此问题在 2.5.2 中修复。
bug : 对于 type 为 Object 或 Array 的属性，如果通过该组件自身的 this.setData
来改变属性值的一个子字段，则依旧会触发属性 observer ，且 observer 接收到的 newVal
是变化的那个子字段的值， oldVal 为空， changedPath 包含子字段的字段名相关信息；目前推荐使用 observers
定义段代替。
组件生命周期
组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。
其中，最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。
组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段。
在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data已被初始化为组件的当前值。这个生命周期很有用，绝大多数初始化工作可以在这个时机进行。
在组件离开页面节点树后， detached 生命周期被触发。退出一个页面时，如果组件还在页面节点树中，则 detached会被触发。
定义生命周期方法
生命周期方法可以直接定义在 Component 构造器的第一级参数中。
Component({ lifetimes: { attached: function() {
// 在组件实例进入页面节点树时执行
}, detached: function() {
// 在组件实例被从页面节点树移除时执行
}, },
// 以下是旧式的定义方式，可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
},
})在 behaviors 中也可以编写生命周期方法，同时不会与其他 behaviors 中的同名生命周期相互覆盖。但要注意，如果一个组件多次直接或间接引用同一个 behavior ，这个 behavior 中的生命周期函数在一个执行时机内只会执行一次。
可用的全部生命周期如下表所示。
组件所在页面的生命周期
还有一些特殊的生命周期，它们并非与组件有很强的关联，但有时组件需要获知，以便组件内部处理。这样的生命周期称为“组件所在页面的生命周期”，在 pageLifetimes 定义段中定义。其中可用的生命周期包括：
Component({
pageLifetimes: {
show: function () {
// 页面被展示
},
hide: function () {
// 页面被隐藏
}, resize: function (size) {
// 页面尺寸变化
}
}
})页面生命周期
总结:
自定义组件Component:
自己定义的一个模块封装后,这个模块就叫做自定义组件,我们可以写多个功能不同的自定义组件,当我们需要使用时,只需要把它们引入到我们的项目中就可以直接使用了,极大的方便了我们的项目搭建和功能完善,并且使项目耦合降低，可读性强和维护性成本降低.
应用生命周期:
应用生命周期的作用范围为整个应用,当应用开始创建完毕到应用关闭,这其中的各个过程,如创建前,创建后,挂载前,挂载后,一直到销毁后(应用关闭),这其中个各个过程就是应用的生命周期.
页面生命周期:
1、小程序注册完成后，加载页面，触发onLoad方法，一个页面只会调用一次。
2、页面载入后触发onShow方法，显示页面，每次打开页面都会调用一次。
3、首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次。
4、当小程序后台运行或跳转到其他页面时，触发onHide方法。
5、当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法。
6、当使用重定向方法wx.redirectTo(OBJECT)或关闭当前页返回上一页wx.navigateBack()，触发onUnload。
总结注意点:
创建自定义组件时,自动生成文件这个方式只有在微信小程序中使用时才会自动生成
组件中在 properties 定义段中，属性名采用驼峰写法（propertyName）；在 wxml 中，指定属性值时则对应使用连字符写法（component-tag-name property-name=“attr value”），应用于数据绑定时采用驼峰写法（attr=""）
然后,就是应用生命周期和页面生命周期的区分了,一个是应用创建到结束为一个生命周期,一个为应用中的一个页面的打开和关闭为一个生命周期.
好了,那么我们的微信小程序基础部分就到这里了,祝大家好运