微信小程序详解(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="")
然后,就是应用生命周期和页面生命周期的区分了,一个是应用创建到结束为一个生命周期,一个为应用中的一个页面的打开和关闭为一个生命周期.
好了,那么我们的微信小程序基础部分就到这里了,祝大家好运