小程序开发-组件使用

一、组件的创建和使用

        1.创建步骤

1.在项目的根目录中，鼠标右键，创建components->test文件夹
2.在新建的components ->test文件夹上，鼠标右键，点击 新建Component
3.键入组件的名称之后回车，会自动生成组件对应的 4 个文件，后缀名分别为.js，.json，.wxml和.wxss
4.注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中

        2.使用自定义组件

1.介绍
全局引入(在app.json全局配置文件中引入组件)
局部引入(在页面.json配置文件中引入组件)

2.使用
    全局引入
      在app.json文件中配置
      {
        "usingComponents": {
          "navigation-bar": "/components/navigation-bar/navigation-bar"
        }
      }

    在.wxml中使用
      <navigation-bar></navigation-bar>


    局部引入
      在页面.json中配置
      {
        "usingComponents": {
          "navigation-bar": "/components/navigation-bar/navigation-bar"
        }
      }
      在.wxml中使用
      <navigation-bar></navigation-bar>

         3.使用场景

1.根据组件的使用频率和范围，来选中合适的使用方式
	组件在多个页面中经常被使用到，建议进行全局引入
	组件只是在特定的页面中被使用到，建议进行局部引用

        4.组件和页面的区别

1.从表面来看，组件和页面都是由.js、.json、.wxml和.wxss这四个文件组成的。但是，组件和页面的.js与.json文件有以下不同：
​    组件的.json文件中需要声明"component": true属性
    组件的.js文件中调用的是Component()函数
      整个程序启动调用的是App()
      某个页面的渲染调用的是Page()
      某个组件的渲染调用的是Component()
    组件的事件处理函数需要定义到methods节点中

        5.组件的数据、方法和属性

               1.组件定义数据

定义
  组件中使用的数据需要定义到data属性中

使用
  在.js文件
    Component({
        data: {    
            displayStyle: ''  
        },
    })

               2.组件的事件处理函数

定义
  组件中事件处理函数和自定义方法都要在methods中定义

使用
  .js文件
    Component({    
        methods: {
            getData(){} 
        }
    })

              3.组件 properties 属性

定义
    组件properties属性是用来接收来自父组件传递的数据

使用
    .js文件
    Component({
	     properties: {    
            background: {//完整的属性写法
                type: String, //属性类型
                value: ''    //属性默认值
            },
            back: {
                type: Boolean,
                value: true
            },
            max:Number  //不需要默认值可以简写
         }
     })

              4.使用setData修改properties的值

properties: {
  max:Number
},
 this.setData({max:11})


注意：直接修改属性会打乱之前的判断逻辑

          5.数据监听器

介绍
    数据监听器用于监听和响应属性或数据字段的变化，从而执行特定的操作。

使用
    1.监听字段变化
    Component({
	    observers:{
		    "字段1,字段2":function(字段1新值,字段2新增){
		    }
	    }
    })

    2.监听对象变化
    Component({
	    observers:{
    		//方法1
	    	"对象.属性A,对象.属性B":function(属性A,属性B){
	    		// 当属性A发生变化会触发
	    		// 当属性B发生变化会触发
	    		// 当对象整体发生变化也会触发
	    	}
	    	//方法2
   	    	'对象.**': function (newObj) {
   		       console.log(newName)
            }
	    }
    })

          6.组件的生命周期

介绍
    组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点，或遇到一些特殊的框架事件时被自动触发。


全部生命周期函数
    created     在组件实例被创建时执行
    attached    在组件实例进入页面节点树时执行
    ready		组件在视图层布局完成后执行
    moved		组件实例被移动到节点树另一个位置时执行
    detached    组件实例被从叶敏节点树移除时执行
    error		当组件方法抛出错误时执行

主要生命周期
    1.最主要的生命周期created、attached、detached
    2.created为组件实例刚创建时触发，此时还不能调用setData，通常情况下此声明周期只能用于给组件this添加一下自定义属性字段
    3.attached为组件完全初始化完成进入页面节点树后，this.data已完成初始化。这个生命周期是大多数初始化或者发送数据请求阶段
    4.detached为组件离开页面节点树后，离开页面时会触发页面中每个自定义组件的detached生命周期,此时适合做一些清除性工作

使用
    Component({
      lifetimes:{
        created(){
          console.log('创建');
        },
        attached(){
          console.log('节点树');
        },
        detached(){
          console.log("离开");
        }
      },
    })

7.组件所在页面的生命周期

介绍
  有时，自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期
    show    组件所在页面被展示时执行
    hide    组件所在的页面被隐藏时执行
    resize	组件所在页面尺寸发生变化时执行


使用
    Component({
	    pageLifetimes: {
            // 页面被展示
            show() {
              console.log("页面展示");
            },
            // 页面被隐藏
            hide() {
              console.log("页面隐藏");
            },
            // 页面尺寸发生变化
            resize(size) {
              console.log("尺寸变化",size);
            }
          },
    })

注意
    页面开启 "pageOrientation": "auto" 属性，手机取消竖屏锁定，真机调试，把手机横竖切换，就会调用resize组件所在页面生命周期钩子函数。


配置
    .json文件
    {
      "pageOrientation": "auto"
    }

          8.插槽

1.介绍

在自定义组件的wxml结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的wxml结构

 2.单个插槽

介绍
    在小程序中，默认每个自定义组件中只允许使用一个slot占位，这种个数上的限制叫做单个插槽

使用
    .wxml父组件(将插入组件中的内容放到引入的组件中)
        <child-rem>
          <view>ccc</view>
        </child-rem>

    .wxml子组件(组件将slot放到要插入的位置)
         <slot></slot>

3.定义多个插槽

使用
    1.在子组件.js文件定义属性
        Component({
          options:{
            multipleSlots:true //启动多个插槽
          },
        }

    2.定义站位插槽(子组件)
          <slot name='slot1'></slot>
          <slot name='slot2'></slot> 

    3.使用时通过指定属性slot的值类匹配插槽(父组件)
        <child-rem>
          <view slot='slot1'>aaa</view>
          <view slot='slot2'>bbb</view>
        </child-rem>

          9.父子组件传参

                1.属性绑定

介绍
    用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据(只能传递数据，不能传递方法)

使用
  父组件(传值)
    <child-rem  name='cs'></child-rem>
  子组件(接收)
    Component({
      properties: {
        name: {
          type: String,
          value: ''
        }
      },
    }

                2.事件绑定

介绍
  事件绑定用于实现子向父传值，可以传递任何类型的数据。

使用
    1.父组件(.js文件)配置接收数据方法
      childRemFn(e){
      	//e.detail 获取传递的值
        console.log(123,e.detail);
      },

    2.在wxml中通过自定义事件形式传递给子组件函数
      <child-rem bind:paramtFn="childRemFn" ></child-rem>

    3.在子组件(.js文件中)传给父组件值
      this.triggerEvent('paramtFn',{value:123}) 

                3.获取子组件实例

介绍
    获取子组件的实例对象，从而直接访问子组件的任意数据和方法。

使用
    1.在父组件(.wxml)
      <child-rem id="childRem" class="childRem1"></child-rem>
      <button bind:tap='getChildData'>获取子组件信息</button>
    2.在父组件(.js文件)
      getChildData(){
        // 根据id获取子组件信息
        let a = this.selectComponent('#childRem')
        // 根据class获取子组件信息
        let b = this.selectComponent('.childRem1')
      },

其他

        1.data和properties的区别

1.小程序组件中，data和properties数据的用法相同
2.区别
	data更倾向于存储组件的私有数据
	properties更倾向于存储外界传递到组件中的数据
	但是小程序的data和properties是同一个对象的不同引用
3.注意：
	不建议修改properties数据,如果要修改properties的数据, 最好通过子组件通信给父组件的方式实现

        2.触发提示框

wx.showToast({title:'cuow'})