wx小程序学习Day3 自定义组件、父子组件传递数据、小程序生命周期

今天是学习小程序的第3天

---

---

1. 自定义组件

1.1 创建自定义组件

类似于页面，一个自定义组件由json、wxml、wxss、js四个文件组成

根目录下新建一个components文件夹，现在想要创建一个Tabs组件，所以在里面建一个Tabs文件夹，右键新建compoennts，和Tabs文件夹同名，就会自动生成四个文件

---

1.2 声明自定义组件

首先要在该组件的json文件中将component字段设为true：

哪个页面要使用自定义组件，就在哪个页面的.json文件中声明：
⚠️到这不用加后缀名

---

1.3 标题激活选中

需要实现：点到哪个红哪个

首先先要把这四个标题整出来：
不要在.wxml中写死，在.js的data中定义数据：

在.wxml用wx:for循环data中的tabs数组
因为我们的标题肯定是需要点击的，这里绑定了点击事件，绑定关键词bindtap，而小程序的事件无法直接传参，又需要通过自定义属性的方式把我们点击的标题的index传过去
(这里的index是wx:for-index的省略写法)

标题只需要在.wxss中使用简单的flex布局

经过上面的操作，已经可以实现四个标题，接下来要通过点击改变标题颜色：
已经将active类设置了样式，其实就是要给点击的标题动态添加active类

在.js的data中新增一个currentIndex，初始为0：

现在需要处理handleTap：
这里的参数e就是点击的事件源对象，我们的自定义属性op的值就在e.currentTarget.dataset里
op实际上我们设置为了该标题的index

逻辑就是当我们点击了某标题的时候，就将currentIndex设置为这个标题的index，我们判断是否添加active类的条件就是currentIndex是否等于点击的标题的index

相等则添加active类，否则不添加

---

1.4 父向子传递数据

一开始我们把标题的数据全部写在了这个组件里，但如果之后有别的页面要使用这个组件，就不能动态使用数据，所以现在我们需要把数据都抽离出来

将子组件Tabs.js的data中的tabs数组抽到页面com1.js的data中去

之后再把这个数据由父组件页面传给子组件Tabs：
通过在标签上加属性的方式，这里加的属性名是tabs，tabs="{{tabs}}"就将这个页面的data中的tabs数组传给这个tabs属性

在子组件中接收：
接收数据都放在properties中

---

1.5 子向父传递数据

顺便学习一下子向父传递数据：
在处理handleTap事件的时候，就要触发父组件的自定义事件，同时传递数据给父组件

this.triggerEvent("父组件的自定义事件名称", 传递的参数);

这里设置父组件的自定义事件名为itemchange，把index 传过去

绑定关键词是bind+自定义事件名，交给一个方法处理

自定义事件放在和data同级的位置

---

1.6 slot

每个标题对应的页面的内容是不同的
那就不能写死，这时候可以放插槽：

需要替换的标签，就要写在使用了这个子组件的地方：
这里通过wx:if来判断渲染哪个标题对应的内容，所以父组件页面是需要知道我们点击了哪个标题，就要用到上面的子向父传递

这个e.detail中保存的就是点击的标题的index，我们将这个页面的data中新设置一个currentIndex属性

现在点击不同标题可以成功渲染不同的内容

---

2. 组件的其他属性

Component构造器用于定义组件，调用Component构造器时可以指定组件的属性、数据、方法等

定义段	类型	是否必填	描述
properties	Object	否	组件的对外属性，是属性名到属性设置的映射表
data	Object	否	组件的内部数据
observers	Object	否	组件数据字段监听器，监听properties和data的变化
methods	Object	否	组件的方法，包括事件响应函数和自定义的方法
created	Function	否	组件生命周期函数，在组件实例刚被创建时执行，此时不能调用setData
attached	Function	否	组件生命周期函数，在组件实例进入页面节点树时执行
ready	Function	否	组件生命周期函数，在组件布局完成后执行
moved	Function	否	组件生命周期函数，在组件实例被移动到节点树另一个位置时执行
detached	Function	否	组件生命周期函数，在组件实例被从页面节点树移除时执行

---

3. 小程序生命周期

分为应用生命周期和页面生命周期

3.1 应用生命周期

属性	类型	是否必填	说明
onLaunch	funtion	否	监听小程序初始化
onShow	funtion	否	监听小程序启动或切前台
onHide	funtion	否	监听小程序切后台
onError	funtion	否	错误监听函数
onPageNotFound	funtion	否	页面不存在监听函数

应用指的是小程序的入口文件app.js

3.2 页面生命周期

属性	类型	说明
data	Object	页面的初始数据
onLoad	Funtion	生命周期回调—监听页面加载
onShow	Funtion	生命周期回调—监听页面显示
onReady	Funtion	生命周期回调—监听页面初次渲染完成
onHide	Funtion	生命周期回调—监听页面隐藏
onUnload	Funtion	生命周期回调—监听页面卸载(关闭)
onPullDownRefresh	Funtion	监听用户下拉动作
onReachBottom	Funtion	页面上拉触底事件的处理函数
onShareAppMessage	Funtion	用户点击右上角转发
onPageScroll	Funtion	页面滚动触发事件的处理函数
onResize	Funtion	页面尺寸改变时触发
onTabItemTap	Funtion	当前是tab页面时，点击tab时触发

---