原生-小程序（三）小程序（三）一、自定义组件 1.介绍几乎所有的前端项目开发方式都是组件化，小程序中也不例外。也提供

小程序（三）

一、自定义组件

1.介绍

几乎所有的前端项目开发方式都是组件化，小程序中也不例外。也提供了自定义组件的方式来构建项目。

2.自定义组件使用步骤

（1）创建（创建components文件夹，创建子同名文件夹和同名vue文件）

1.根目录创建components/xxx文件夹
2.右键xxx文件夹，点击新建Component
3.输入文件名，完成创建

（2）注册, 在需要使用组件的页面json文件注册组件

"usingComponents": {
    "MyButton": "/components/myButton/myButton"
  }

（3）使用

<MyButton></MyButton>

二、组件通信

1.父子传参

传数据——父组件中，通过组件的标签属性传值
接收数据——子组件，通过properties接收

步骤

（1）步骤

① 父组件通过属性传值

<MyButton title="父传子"></MyButton>

② 子组件通过properties接收父组件传过来的数据

  properties: {
    title: {
      type: String,
      value: "默认值",
    },
  },

2.子传父

步骤

（1）步骤

① 子组件绑定事件

<button bindtap="btnToFa">{{title}}</button>

② 触发子组件事件

methods: {
    btnToFa(){
      // 传值
      this.triggerEvent('btnToFa','hello')
    }
  },

③ 父组件定义接收数据的方法

<MyButton title="父传子" bindbtnToFa="btnToFa"></MyButton>

④ 父组件通过绑定自定义事件

<MyButton title="父传子" bindbtnToFa="btnToFa"></MyButton>

<script>
export default {
    methods:{
        btnToFa(e){
            console.log(e.detail)
        }
    }
}
</script>

三、声明周期

前言:

小程序生命周期一个组件或者页面生老病死的过程一堆会在特定时期触发的函数

1.应用类

属性	说明
onLaunch	生命周期回调——监听小程序初始化。
onShow	生命周期回调——监听小程序启动或切前台。
onHide	生命周期回调——监听小程序切后台。
onError	错误监听函数。
onThemeChange	监听系统主题变化

（1）onlaunch

触发时机：初始化小程序时，全局只触发一次

使用场景：初始化数据，获取用户位置信息，获取用户信息

/**
   * 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    
  },

（2）onShow

触发时机：从后台切换到前台时或者第一次启动时
使用场景：常用来获取统计数据，例如时长，时段

注意：进入后台进程后，大概5分钟，会自动关掉

  /**
   * 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("我切换回前台了");
  },

（3）onHide

触发时机：从前台切换到后台时或者第一次启动时

使用场景：常用来获取一些统计数据

  /**
   * 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log("我切换回后台了");
  },

（4）onError

触发时机：出现错误时

使用场景：配合后台接口，上报错误（埋点）

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log(msg);
  },

（5）onThemeChange

使用场景：自动换色（跟随系统）

  /**
   * 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log(msg);
  },

2.页面级

属性	说明
onload	生命周期回调—监听页面加载
onShow	生命周期回调—监听页面显示
onReady	生命周期回调—监听页面初次渲染完成
onHide	生命周期回调—监听页面隐藏
onUnload	生命周期回调—监听页面卸载
onPullDownRefresh	监听用户下拉动作
onReachBottom	页面上拉触底事件的处理函数
onShareAppMessage	用户点击右上角转发
onShareTimeline	用户点击右上角转发到朋友圈
onAddToFavorites	用户点击右上角收藏
onPageScroll	页面滚动触发事件的处理函数
onResize	页面尺寸改变时触发，详见响应显示区域变化

（1）onLoad

触发时机：创建后自动执行

使用场景：获取数据、存数据到变量

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.request({
      url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata",
      success: (res) => {
        this.setData({ list: res.data.message });
      },
    });
  },

（2）onShow, onHide

触发时机：后台-前台，前台-后台 || 进入页面-离开页面

使用场景：获取数据、存数据到变量

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {},

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {},

（3）onReady

对应vue的mounted
触发时机：渲染完成

使用场景：

最先获取元素
开启定时器

  /**
   * 生命周期函数--监听页面初次渲染完成
   * mounted
   */
  onReady() {
    console.log("页面初次渲染完成");
  },

（3）onUnload

对应vue的destroyed
触发时机：渲染完成
使用场景：
- 清除定时器
- 清除缓存
- navigator除了默认的跳转方式，不会写在页面。尽量缓存组件页面
- 非默认跳转，都会卸载页面
```
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {
    console.log("页面卸载啦");
  },
```

（4）onPullDownRefresh

触发时机：下拉

使用场景：下拉刷新

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {},

（5）onReachBottom

触发时机：滚动到底部的时候

使用场景：上拉请求下一页数据

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {},

（6）onShareAppMessage

触发时机：用户点击右上角分享
使用场景：分享赠送福利
```
onShareAppMessage() {},
```

（7）onShareTimeline

触发时机：用户点击右上角转发朋友圈
使用场景：转发朋友圈送福利
```
onShareTimeline() {},
```

（8）onAddToFavorites

触发时机：右上角收藏
使用场景：收藏送福利
```
onPageScroll() {},
```

（9）onPageScroll

触发时机：页面滚动触发事件的处理函数
使用场景：吸顶效果
```
onPageScroll() {},
```

（10）onResize

触发时机：页面尺寸改变时触发
使用场景：用户设备横屏时
```
onResize() {},
```

3.组件级

（1）`attached`

对应created
触发时机：挂载后

使用场景：发请求，开定时器

lifetimes: {
    /**
     * 对应created
     * 触发时机：挂载后
     * 场景：发请求，开定时器
     */
    attached() {},
  },

（2）`detached`

对应destroyed
触发时机：卸载时

使用场景：清除动作

lifetimes: {
    /**
     * 对应destroyed
     * 触发时机：卸载时
     * 场景：清除动作
     */
    detached() {},
  },

原生-小程序（三）