小程序学习记录八：小程序组件

电玩女神 2021-09-07 06:19 635阅读 0赞

### 小程序组件 ###

*  一、自定义组件
 *  二、局部引用组件
 *  三、全局引用组件
 *  四、组件和页面的区别
 *  五、自定义组件样式
 *  六、修改组件样式的隔离选项
 *  七、自定义组件的数据、方法和属性
 *   *  1.数据
     *  2.方法
     *  3.组件接受外部的值
     *  4.获取外界属性值
     *  5.data和paoperties的区别
     *  5.修改properties 的值
 *  八、组件的数据监听器
 *   *  1.监听data里的多个属性
     *  2.监听对象的属性的变化
     *  3.监听对象所有属性的变化
 *  九 、纯数据字段
 *  十、组件的生命周期
 *   *  1.created 声明周期
     *  2.attached 声明周期
     *  3.detached 生命周期函数
 *  十一，如何定义组件的生命周期。
 *   *  1.和data属性平级定义
     *  2.在lifetimes属性中定义
 *  十二、组件所在页面的生命周期。
 *  十三、自定义组件插槽
 *   *  1.单个插槽
     *  2.多个插槽
 *  十四、父子组件通信
 *   *  1.属性绑定
     *  2.事件绑定
     *  3.获取组件实例
 *  十五、behaviors
 *   *  1.创建behaviors
     *  2.引入behaviors
     *  3.同名规则

# 一、自定义组件 #

1.在项目根目录中创建components-test文件夹  
2.在test文件夹上，鼠标右键，然后点击‘新建Component’  
3.输入组件名称后，会自动生成组件对于的文件，后缀名分别为js,.json,.wxml,和wxss

# 二、局部引用组件 #

在页面的.json文件中使用，只能在引用了组件的页面中使用。  
局部引入组件。

{ 
    //usingComponents节点就是用来注册组件的
       "usingComponents":{ 
         "my-test1" :"/components-test1/test"
    }
    
    }

在wxml页面中

<my-test1></my-test1>

# 三、全局引用组件 #

在app.json文件中引用组件即可

{ 
     "pages":{       },
     "window":{    },
     //这里注册全局组件
     "usingComponents":{ 
       "my-test1" :"/components-test1/test"
    }
    
    }

在某个页面wxml中

<my-test1></my-test1>

直接使用即可。

# 四、组件和页面的区别 #

组件和页面的.js和.json文件有所不同。  
1.组件的.json文件中需要声明’components’: true属性  
2.组件的.js文件中调用的是Componen()函数  
3.组件的事件处理函数需要定义到methods节点中。

# 五、自定义组件样式 #

app.wxss的样式对于组件的样式是无效的。组件只能使用自己的样式。  
只有class样式才有样式隔离，其他id选择器，标签选择器，属性选择器，不受样式隔离的影响。

# 六、修改组件样式的隔离选项 #

组件外部不会影响组件内部的样式  
组件内部不会影响组件外部样式。  
为了希望外界能控制组件内部的样式。  
在组件的.js文件中

Component({ 
         option:{ 
          styleIsolation : 'isolated'
          //isolated是启用样式隔离。class指定的样式将不会相互影响
     //单项影响： //apply-shared表示页面wxss样式将影响到自定义组件中，但自定义组件的wxss中指定的样式不会影响页面，
       //双向影响： //shared 表示页面wxss样式将会影响到自定义组件，自定义组件wxss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件。
     
    }
     
    
    })

或者在组件的.jsonw文件中

{ 
       "styleIsolation" : 'isolated'
    
    }

# 七、自定义组件的数据、方法和属性 #

## 1.数据 ##

数据都需要放到Component()函数里,和页面一样都需要放到data里。

Component（{ 
      data:{ 
      count:0,
    }
    }）

## 2.方法 ##

方法和事件处理函数都需要定义到methods节点中

Component（{ 
      data:{ 
      count:0,
    }，
    methods:{ 
      addcount(){  //事件处理函数
    this.serdata({ 
         count:this.data.coun +1 
         
    })    
    this._showCount()//自定义方法最好以下划线开头，和事件函数区分，
    }
    _showCount(){   //自定义方法
         wx.showToast({ 
         title:'count',
         icon:'none'
    })
    }
    }
    }

## 3.组件接受外部的值 ##

组件的js文件中

Component（{ 
    properties :{ 
      max:{ 
        type:Number, //属性值的数据类型
        value:10   //属性值的默认值
    }
    //这是完整定义属性的方式，当需要指定属性默认值时，使用此类型
    
    min:Number
    //简化定义属性的方式，
     
    }
    }）

组件的wxml文件中

<my-test max="10"></my--test>

## 4.获取外界属性值 ##

this.properties.max

## 5.data和paoperties的区别 ##

vue中data是可读可写的，props是只能读取的，不能改写，而小程序中，data和properties 都是可读可写的。

data更倾向于组件的私有数据  
properties 是外界传递过来的数据。

Component（{ 
    data:{ 
    count:0
    }
    properties :{ 
      max:{ 
        type:Number, //属性值的数据类型
        value:10   //属性值的默认值
    }
    //这是完整定义属性的方式，当需要指定属性默认值时，使用此类型
    
    min:Number
    //简化定义属性的方式，
      
    
    }
    methods:{ 
         showif(){ 
        console.log(this.data)
            console.log(this.properties )
                  console.log(this.properties === this.data)//true
                  //表示他们两个本质上是一样的。
    }
    
    }
    })

## 5.修改properties 的值 ##

和修改data里的值方法一直，通过this.setdata(),properties 里的值也能渲染在页面上。

# 八、组件的数据监听器 #

监听和相应数据的变化，从而执行特定的操作，它的作用类似于vue中的watch，监听数据的变化,

## 1.监听data里的多个属性 ##

Component（{ 
    observers:{ 
     '字段A，字段B':function（字段A的新值，字段B的新值）{ 
     
    }
    
    }
    })
    
    //例子:
    Component（{ 
    data:{ n1:0,n2:0,sum:0},//数据节点
    methods:{ 
       addN1(){  this.setData({ n1:this.data.n1+ 1 })},
      addN2(){  this.setData({ n2:this.data.n2+ 1 })},
    
    }
    observers:{ 
     'n1,n2':function(n1,n2){ 
     this.setData({ sum:n1+n2})
    }
    }
    })

## 2.监听对象的属性的变化 ##

Component（{ 
    observers:{ 
     '对象.属性A，对象.属性B':function（属性A的新值，属性B的新值）{ 
         //触发有三种情况
         //1.为属性A赋值使用setData方式
         //2.为属性B赋值使用setData方式
         //3.直接为对象赋值使用this.setData.对象时触发。 
    
    }
    
    }
    })

## 3.监听对象所有属性的变化 ##

Component（{ 
    observers:{ 
     '对象.**':function（属性A的新值，属性B的新值）{ 
              //监听所有属性
    }
    
    }
    })

# 九 、纯数据字段 #

仅在组件内使用,不渲染到页面上,只在业务逻辑中用到,有助于**提升页面性能**。  
1.使用规则  
在Component构造器的options节点中，知道pureDataPattern为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，

Component（{ 
    options:{ 
    //指定以_开头的为纯数据字段，这样的数据只能用于业务处理，不能放到页面上。
     pureDataPattern:/^_/
    
    },
    data:{ 
      a:true,
      _b:false.
    }
    })

# 十、组件的生命周期 #

<table> 
 <thead> 
  <tr> 
   <th>生命周期函数</th> 
   <th>参数</th> 
   <th>描述说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>created</td> 
   <td>无</td> 
   <td>在组件实例刚刚被创建时执行，还没放到页面中渲染</td> 
  </tr> 
  <tr> 
   <td>attached</td> 
   <td>无</td> 
   <td>在组件实例进入页面节点树时执行，还没放到页面中渲染</td> 
  </tr> 
  <tr> 
   <td>ready</td> 
   <td>无</td> 
   <td>在组件在视图层布局完成后执行</td> 
  </tr> 
  <tr> 
   <td>moved</td> 
   <td>无</td> 
   <td>在组件实例被移动到节点树的另一个位置时执行</td> 
  </tr> 
  <tr> 
   <td>detached</td> 
   <td>无</td> 
   <td>在组件实例被从页面节点移除时执行</td> 
  </tr> 
  <tr> 
   <td>error</td> 
   <td>Object Error</td> 
   <td>每当组件方法抛出错误时执行</td> 
  </tr> 
 </tbody> 
</table>

## 1.created 声明周期 ##

此时组件刚被创建好，会触发created生命周期函数  
特点：  
此时还不能调用setData  
通常在这个生命周期函数中，只应该用于给组件的this添加一些自定义的属性字段

## 2.attached 声明周期 ##

特点：  
此时this.data已经被初始化完毕  
绝大多数初始化的工作可以在这个时机进行

## 3.detached 生命周期函数 ##

退出一个页面时，会触发页面内每个自定义组件的detached生命周期函数  
可以做一些清理性质的工作，  
清除定时器，解绑事件。

# 十一，如何定义组件的生命周期。 #

## 1.和data属性平级定义 ##

旧 的方式

## 2.在lifetimes属性中定义 ##

推荐这个，两种同时存在，会执行这里的，会覆盖旧版的方式。

Component（{ 
    lifetimes:{ 
    created(){ },
    attached(){ },
    detached(){ },
    
    
    },
    data:{ 
      a:true,
      _b:false.
    }
    })

# 十二、组件所在页面的生命周期。 #

有时候组件的行为依赖与页面状态的变化，此时就需要用到组件所在页面的生命周期。  
1.监听页面的生命生命周期

//在pageLifetimes节点中,才能监听页面的生命周期
    Component([
    pageLifetimes:{ 
        show :function(){ },//页面被展示时的生命周期函数，一般是调用组件的方法，执行某些初始化事件
        hide:function(){ };//页面被隐藏
        resize:function(){ }//页面尺寸变化
    
    }
    
    ])

# 十三、自定义组件插槽 #

## 1.单个插槽 ##

可以提供一个<slot>节点（插槽），就是一个占位符。用于承载组件使用者提供wsml结构。  
组件里，组件叫demo

<view>
    这里是组件内部
    <slot> </slot>
    </view>

页面中

<view>
    <demo>  这里就能写东西和标签了</demo>
    </view>

## 2.多个插槽 ##

在组件里启用

//在pageLifetimes节点中,才能监听页面的生命周期
    Component([
    options:{ 
           multipleSlots:true //在组件定义时的选项中启用多slot支持
    },
    
    propertie:{ 
    
    }
    methods:{ 
    
    }
    
    ])

组件里要用命名插槽，组件叫demo

<view>
    这里是组件内部
    <slot name="before'> </slot>
     //要用name属性，表示这个插槽对应哪个内容
    <slot name="before'> </slot>
    中间的文字
    <slot name="after'> </slot>
    </view>

页面中

<view>
    <demo >  
    
    <view slot="before">这里就能写东西和标签了</view>
    
    <view slot="after">这里就能写东西和标签了</view>
    </demo>
    </view>

# 十四、父子组件通信 #

## 1.属性绑定 ##

用于父组件向子组件的指定属性设置数据，仅能设置JSON兼容的数据  
父组件中  
js文件

data:{ 
    count:0
    }

wxml文件

//将父组件的值传给子组件
    <demo count="{ {count}}"></demo>

子组件中  
js文件

Component([
    propertie:{ 
    //接受父组件传过来的值，可以看作是data里的数据，正常使用即可
     count:Number
    }
    ])

wxml文件中  
直接使用即可。

<view> { { count}}</view>

## 2.事件绑定 ##

用于子组件向父组件传递数据，可以传递任意数据  
子组件不能直接修改传过来的值，需要通知父组件修改  
子组件中  
js文件

Component([
    propertie:{ 
    //接受父组件传过来的值，可以看作是data里的数据，正常使用即可，this.propertie.count这样使用
     count:Number
    },
    methods:{ 
     addCount(){ 
             this.triggerEvent('自定义事件名称'，{ 参数，选填})
    }
    }
    ])

wxml文件中  
直接使用即可。

<view> { { count}}
    <button bindtap="addCount">  </button>
    </view>

父组组中

父组件中  
js文件

data:{ 
    count:0
    },
    methods:{ 
    addCount(e){ 
     //e.detail获取传过来的数据
            this.setData({ 
              count:this.data.count + 1 
    })
    }
    }

wxml文件

//监听事件使用bind:事件名，结构清晰，推荐使用
    <demo count="{ {count}}"   bind:addCount ="addCount"></demo>
    
    //直接写bind事件名，不推荐，虽然效果一样
    <demo count="{ {count}}"   bindaddCount ="addCount"></demo>

## 3.获取组件实例 ##

父组件还可以用过this.selectComponent()获取子组件实例对象  
这样就可以直接访问子组件的任意数据和方法

this.selectComponent(“id或class选择器”)，可以获取和带哦用子组件实例的任何数据和方法。

# 十五、behaviors #

behaviors是小程序中，用于实现组件之间代码共享的特性，类似于vue中的mixins，一个behaviors可以给多个组件使用，且每个组件的behaviors互不影响。  
每个behaviors可以包含一组属性，数据、生命周期函数和方法，组件引用behaviors时，它的数据，属性和方法会被合并到组件中。  
每个组件可以引用多个behaviors，behaviors也可引用其他的behaviors。

## 1.创建behaviors ##

module.exports = behaviors({ 
    data:{ 
    
    //以后只要引入了这个behaviors的组件都会有name属性。
    name:'张三’
    },
    properties:{ 
    }
    })

## 2.引入behaviors ##

const mybehaviors = require('/behaviors/behaviors')
    Component({ 
     //引入后，还需要挂载才能生效,此时这个组件就能使用name这个属性了。
      behaviors:[mybehaviors  ]
    })

## 3.同名规则 ##

1.同名数据  
数据是对象类型，会进行对象合并。其他就是父覆盖子，同级的后面的覆盖前面的。  
2.同名属性或方法  
3.同名的生命周期函数