微信小程序（四）自定义组件

自定义组件

类似vue或者react中的自定义组件， 可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使用

创建自定义组件

​ 一个自定义组件由 json wxml wxss js 4个文件组成

​ |先新建一个文件夹components => 在这个文件夹内部创建myHeader文件夹 => 创建组件名myHeader，结果如下所示

​ |快速创建组件：点击文件夹，右键 => 新建component

声明组件

​ 在组件的json文件中进行自定义组件声明

//这里是myHeader.json
{
    "component":true
}

​ 在需要使用组件的页面的json文件进行引用声明，还要提供对应的组件名和路径

//假设这里是index.json
{
     "usingComponents": {    
      // 要使用的组件的名称 和 组件的路径    
      	"myHeader":"/components/myHeader/myHeader"  
     } 
}

编辑组件

​ 还要在组件的 wxml文件中编写组件模板，在wxss 文件中加入组件样式， 写法与页面模板相同 （注意： 在组件wxss中不应使用ID选择器、属性选择器和标签名选择器。 ）

.title{
  display: flex;
  padding:10rpx;
}
.items{
  flex: 1; /*平均分配所有空间*/
  display: flex;
  justify-content: center;
  align-items: center;
}
.active{
  color: red;
  border-bottom: 10rpx solid red;
}

注册组件

​ 在组件的js 文件中，需要使用Component() 来注册组件，并提供组件的属性定义、内部数据和 自定义方法

(组件js文件存放事件回调函数时 => methods中 ，页面js文件存放在data同层级下)

//myHeader.js
Component({  
    properties: {
    	// 这里定义了innerText属性，属性值可以在组件使用时指定  
    	innerText: { 
            // 期望要的数据是 string类型      
            type: String,
			value: 'default value',
        }
    },
    data: {
        // 这里是一些组件内部数据
        someData: {}  
    },  
    methods: {
        // 这里是一个自定义方法
        customMethod: function(){}
    }
})

小案例

​ 实现一个导航栏的切换（声明及编辑组件这里省略 同上面的例子)

<view class="my-header">
  <view class="title">  
    <view wx:for="{{myHeader}}" wx:key = "id" class="items {{item.isActive?'active':''}}" bindtap="changeActive" data-index="{{index}}">
      {{item.name}}
    </view>
  </view>
  <view class="content">内容</view>
</view>

Component({
  /**
   * 组件的初始数据
   */
  data: {
      "myHeader":[
        {
          id:0,
          name:"首页",
          isActive:true
        },
        {
          id:1,
          name:"原创",
          isActive:false
        },
        {
          id:2,
          name:"分类",
          isActive:false
        },
        {
          id:3,
          name:"关于",
          isActive:false
        }
      ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
    changeActive(e){
      //获取被点击的索引
      const {index} = e.currentTarget.dataset
      //获取data中的数组
      let {myHeader} = this.data
      //遍历数组，如果i为被点击的索引，修改其isActive为true否则为false
      myHeader.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false) 

      this.setData({
        myHeader
      })
    }
  }
})

​ 结果如图所示 动态的导航栏（红色是被选中 可切换）

自定义组件传参

​ 父 => 页面，子 => 组件

父向子传递

​ |父页面通过属性的方式给子组件传递参数

​ |子组件在properties内接收数据（type和value属性) => 可以直接当做data中的数据使用

<!--父页面index.wxml-->
<myHeader aaa="a123a"></myHeader>

//子组件的js文件
Component({
    properties: {
        aaa:{
            type:string,
            value:""
        }  
    }
})

子向父传递

​ |子组件通过事件的方式给父页面传递参数

​ |子组件触发自定义事件需要使用triggerEvent方法，指定事件名 、 detail对象

​ |父页面标签上加入一个自定义事件（bind+自定义事件的名称）

<!--父页面的wxml文件-->
<tabs  bindmytap="onMyTab" >  内容 </tabs>

//父页面的js文件
 onMyTab(e){
     console.log(e.detail);
 },

//子组件的js文件
 methods: {
     handleItemActive(e){
         //this.triggerEvent('父组件自定义事件的名称','要传递的参数')
         this.triggerEvent('mytap','haha');
     }  
 } 

slot标签

​ 其实就是一个占位符（插槽）父页面调用子组件时 再传递标签过来 => 替换slot的位置

单个slot

<!--子组件wxml-->
<view>
  <text>我是标准的</text>
  <!--下面是slot插槽（占位），用于承载组件引用时提供的子节点-->
  <slot></slot>
</view>

<!--封装父页面-->
<myHeader>
<!-- 下面这部分内容将被放置在组件 <slot> 的位置上 -->
  <view>我是定制的内容</view>
</myHeader>

多个slot

​ |给每个插槽起一个名字：name属性

​ |必须在component对象中添加一个选项：options

<!--第一步：封装组件-->
<view>
 <text>我是标准的</text>
 
 <slot name="custom1"></slot>
 <slot name="custom2"></slot>
</view>

// 第二步：启用插槽
Component({
  options: {
    multipleSlots: true
  }
})

<!--第三步：引用组件 父页面-->
<f-music>
<!-- 这部分内容将被放置在组件 <slot> 的位置上 -->
  <view slot="custom1">我是定制的内容1</view>
  <view slot="custom2">我是定制的内容2</view>
</f-music>

组件的其他属性

数据监听器

​ 数据监听器支持监听属性或内部数据的变化，可以同时监听多个。一次 setData 最多触发每个监听器一次。

有时，在一些数据字段被 setData 设置时，需要执行一些操作；同时，监听器可以监听子数据字段。

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
     //监听数据
  	'numberA, numberB': function(numberA, numberB) {
      	// 在 numberA 或者 numberB 被设置时，执行这个函数
     	this.setData({
        	sum: numberA + numberB
      	})
    },
    // 监听字段
     'arr[12]': function(arr12) {
      	// 使用 setData 设置 this.data.arr[12] 时触发（设置 this.data.arr 也会触发）
      	arr12 === this.data.arr[12]
    }
  }
})

组件生命周期

​ 组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。最重要的生命周期是 created attached detached ，包含一个组件实例生命流程的最主要时间点。

​ | 组件实例刚刚被创建好时， created 生命周期被触发。此时，组件数据 this.data 就是在 Component 构造器中定义的数据 data 。 此时还不能调用 setData 。 通常情况下，这个生命周期只用于给组件 this 添加一些自定义属性字段。

​ |在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发。此时， this.data 已被初始化为组件的当前值。绝大多数初始化工作可以在这个时机进行。

​ |组件离开页面节点树后 / 退出一个页面时组件还在页面节点树中 =>detached 会被触发

​ 定义生命周期：

Component({
  lifetimes: {
    attached: function() {
      // 在组件实例进入页面节点树时执行
    },
    detached: function() {
      // 在组件实例被从页面节点树移除时执行
    },
  },

小程序的生命周期

应用生命周期

​ 1.onLaunch():小程序第一次启动 => 获取用户的个人信息

​ 2.onShow()：小程序被用户看到 可能会切换到其他应用又回到小程序 => 可以对数据重置

​ 3.onHide()：小程序被隐藏（切换到其他应用）=> 可以暂停或清除定时器

​ 4.onError()：报错时触发 => 可以手机错误信息通过异步请求发送到后台

​ 5.onPageNotFound():应用第一次启动 找不到入口页面

//如果页面不存在 通过js方式来重新跳转页面
wx.navigateTo({
    url:''
})

页面生命周期