小程序组件

组件的生命周期

[

](https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/lifetimes.html)

• attached  生命周期最常使用。进入页面节点树后调用。 this.data  已被初始化为组件的当前值。这个生命周期很有用，可以对 this.data 进行操作拉。绝大多数初始化工作可以在这个时机进行。

应用生命周期

app.js 中

1./在应用第一次启动的时候触发的事件
onlaunch(){
  //在应用第一次启动的时候，获取用户的个人信息
}
2./应用被 用户看到
onShow(){
  //对应用的数据或者页面效果 重置
}
3./应用被 隐藏时
onHide(){
  //暂停或者清除定时器 节约内存
}
4./应用的代码发生了报错的时候，就会触发
onError(err){
  //在应用发生代码报错的时候，收集用户的错误信息，通过异步请求，将错误的信息发送到后台去
}
5./页面找不到就会触发, 应用第一次启动的时候，如果找不到第一个入口页面，才会触发
onPageNotFound(){
  //如果页面不存在了，通过js的方式来重新跳转页面 重新调到第二个页面
  wx.navigateTo({
    url:'要跳转的页面路径'
  })
}

页面生命周期

pages 中的各个页面的 js

1.监听页面的加载
onLoad:function(option){
  //onLoad发送异步请求来初始化页面数据
}
2.监听页面显示
onShow:function(){
}
3.监听页面初次渲染完成
onReady:function(){
}
4.监听页面隐藏
onHide:function(){
  //程序隐藏 页面也就隐藏
}
5.监听页面卸载 也是可以通过点击超链接来卸载（open-type可关闭当前页面的属性 都算是卸载）
onUnload:function(){
}
6.监听用户的下拉操作
onPullDownRefresh:function(){
  //页面的数据，或者效果 重新 刷新
}
7.页面上拉触底事件
  -需要让页面 出现上下滚动才行
  onReachBottom:function(){
    //可上拉加载下一页数据
  }
8.用户右上角分享事件
onShareAppMessage:function(){
}
9.页面滚动 就可以触发
onPageScroll(){
}
10.页面尺寸发生变化触发
  -小程序发生了 横屏竖屏切换 的时候触发
  onResize(){
  }
11.必须要求当前页面也是 tabbar页面
点击的自己的tabbar 才会触发
onTabItemTap(){
}

自定义组件

（类似 vue 的自定义组件）

1.页面.js 文件中，存放事件回调函数的时候,存放在 data 同层级下

2.组件.js 文件中，存放事件回调函数的时候，必须必须存放在 **methods****中**

组件通信

父传子

.父组件向子组件传递数据，通过   标签属性的方式来传递

在子组件上进行接收

把这个数据当成是 data 中的数据直接用即可

properties 中每个属性还可以给他绑定 个观察者  ( observer** **)，

• 只要该属性发送变化，就会调用该函数。
• 函数接收两个参数，第一个参数为新的值，第二个参数为旧的值。

子传父

子向父传递数据   通过事件的方式传递，其实类似 vue

–子组件中，触发某事件后，发送自定义事件：

this.triggerEven("自定义事件名", "要传递的参数");

**–父组件中，在调用的子组件上  **

<component-tag-name bind自定义事件名="fatherFun" />
// 或
<component-tag-name bind:自定义事件名="fatherFun" />

–然后 fatherFun(e) 方法中 通过：

e.detail.参数名, 可获取子组件传递过来的参数。

selectComponent

• 可在父组件实例中 通过 this.selectComponent(‘子组件 id’) 调用到子组件的方法或属性
• 
• 
• 在 onload 钩子中可能有问题。推荐放到 onshow 或者更后面的周期里

Slot

<slot></slot>

标签   其实就是一个占位符 插槽

等到   父组件调用   子组件的时候   再传递   标签过来   最终   这些被传递的标签   就会替换 slot  插槽的位置

数据监听器 （observers）

>> 在组件当中 在 observers 对象中有注册的属性。 一旦被 setData 更新。 即调用 该属性的 observers 方法

例子： 当 data 中的 numberA 和 numberB 被 setData 后。 立马执行 numberA 和 numberB 的 observers 方法。使该两个属性相加。并更新到 data 的 sum 属性上。

Component({
  attached: function () {
    this.setData({
      numberA: 1,
      numberB: 2,
    });
  },
  observers: {
    "numberA, numberB": function (numberA, numberB) {
      // 在 numberA 或者 numberB 被setData设置时，执行这个函数
      this.setData({
        sum: numberA + numberB,
      });
    },
  },
});

**例子:  **特别地，仅使用通配符 ** (双星号) 可以监听全部 setData 。

Component({
  observers: {
    "**": function () {
      // 每次 setData 都触发
    },
  },
});