微信小程序——自定义组件、生命周期

「本文已参与好文召集令活动，点击查看：后端、大前端双赛道投稿，2万元奖池等你挑战！」前端

在咱们平常的开发中，组件起着重要的做用。组件的应用场景有不少，好比，当某个板块在多个页面屡次出现的时候，咱们就须要用到组件。json

1. 自定义组件

建立一个component的文件夹，而后右键点击新建component小程序
在page里面添加一个新的页面，打开其中的json文件，以下所示，tab为文件夹名称后端
```
"usingComponents": {
    "Tabs": "../../components/tab/tab"
  }
复制代码
```
再在page的wxml添加<Tabs><Tabs>文件，接下来建立组件的操做就在tab中进行数组
绑定的函数，不能写在data同级，而是写在methods里面微信

a. 父向子传递数据

父组件(页面)向子组件传递数据经过标签属性的方式来传递，markdown

（1）在子组件上进行接收；子组件要经过在properties中接收，传递要从父组件接收的数据str，其中，type是要接收的数据类型，value是默认值。app

（2）把这个数据当成是data中的数据直接用便可。也就是下面这个例子中的str，把它当成是在子组件中data中的数据直接{{str}}用便可。handleItem是绑定的函数(在子组件中)异步

// 这个写在tab.js(子组件js)中
properties: {
  str: {
    type: String,
    value: ''
  }
},
method: {
    handleItemTap(e) {
      // 获取索引
      const { index } = e.currentTarget.dataset;
      // 获取data中的数组
      let { tabs } = this.data;
      // 最严谨的作法，从新拷贝一份数组，再对这个数组备份
      // let tabs = JSON.parse(JSON.stringfy(this.data.tabs));
      // 循环数组
      tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
      this.setData({
        tabs
      })
    },
}
// 这个写在page(父组件wxml)中
<Tabs str="123"><Tabs>

复制代码

以上这段代码至关于在子组件(tab.js)中的data给str赋值123。这是一个比较简单的例子，也就是说，当咱们要实现父向子传递数据，在父组件中，能够在wxml定义一个tabs数据<Tabs tabs="{{tabs}}"></Tabs>，而后在js文件中定义数据的值，再经过子组件的properties来获取父组件中这个tabs的值而后就能够在子组件中使用了。ide

b. 子向父传递数据

经过事件的方式传递：在子组件的标签上加入一个自定义事件；

在子组件中，点击事件触发的时候，触发子组件中的自定义事件，同时传递数据给父组件。this.triggerEvent("父组件自定义事件的名称", 要传递的参数)

// 子组件js中
methods: {
  handleItemTap(e) {
    const { index } = e.currentTarget.dataset;
    this.triggerEvent("itemChange", { index });
  },
}

// 父组件wxml中 绑定事件
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange"></Tabs>
// 父组件js中 用来接收子组件传递数据的
handleItemChange(e) {
    const { index } = e.detail;
    let { tabs } = this.data;
    tabs.forEach((v, i) => i === index ? v.isActive = true : v.isActive = false);
    this.setData({
      tabs
    })
  },
复制代码

在触发自定义组件中的triggerEvent事件就至关于触发了父组件中的binditemChange事件，而后就会调用handleItemChange这个函数，实现了子父组件之间的链接。

`slot`标签

其实就是一个占位符，等到父组件调用子组件的时候，再传递这些标签，最终这些被传递的标签就会替换slot的位置(写在子组件中)。而后在父组件的Tabs标签中写的东西就会渲染出来了。

2. 生命周期

a. 应用生命周期

应用第一次启动的时候就会触发的事件，在应用第一次启动的时候，获取用户的我的信息。
应用被用户看到触发的事件，对应用的数据或者页面效果重置。
应用被隐藏的时候触发的事件，暂停或者清除定时器
应用代码发生了错误的时候触发的事件，在应用发生代码报错的时候，收集用户的错误信息，经过异步请求将错误的信息发送到后台去。
页面找不到就会触发的事件，在应用第一次启动的时候，若是找不到第一个入口页面才会触发。若是页面不存在了，经过js的方式来从新跳转页面，从新跳转到第二个首页(不能跳转到tabbar页面[相似于导航组件]) wx.navigateTo({url: ''})

App({
  onLaunch() {  // 1. 
    console.log("onLaunch");
  },
  onShow() {   // 2. 
    console.log("onShow");
  },
  onHide() {   // 3. 
    console.log("Hide");
  },
  onError(err) { // 4.
    console.log(err);
  },
  onPageNotFound() {  // 5. 
    console.log("onPageNotFound");
  }
})
复制代码

b. 页面生命周期

在页面的js文件会自动生成的生命周期函数。

onLoad 发送异步请求来初始化页面数据
onUnload有关闭(如关闭当前页面)的意思就是卸载
onPullDownRefresh 在app.js文件中能够设置是否容许上拉刷新

在写小程序的过程当中，忘记了一些方法属性能够经过微信官方文档查找，多打demo才有助于记忆还有让本身更加信手沾来~加油！！