wx小程序组件的使用（1）

一、创建自定义组件

二、组件的注册

三、样式隔离

扫描二维码关注公众号，回复： 15179624 查看本文章

一、创建自定义组件

我们需要在根目录下新建components文件夹然后新建一个文件比如my-text

然后右键新建components

二、组件的注册

我们可以使用全局注册或者局部注册

全局注册我们在app.json中配置，局部我们在页面的json文件中配置，

主要通过usingComponents这个字段配置。

 "usingComponents":{
    "my_text":"/components/my_text/my_text",
  }

三、样式隔离

只有class选择器会有样式隔离

默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项

我们一般在组件js文件中声明options，通过配置styleIsolation 的属性来选择

或者是在json中进行配置,如下

//js文件

 options:{
    styleIsolation:"isolated"
  },


//json文件
  {
    "styleIsolation":"isolated"
  },

可选值	默认值	描述
isolated	是	开启隔离，不会相互影响
apply-shared	否	页面可以影响组件
shared	否	关闭隔离，可以相互影响

四、组件的属性和方法

在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中

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

properties 是组件的对外属性，用来接收外界(父组件)传递到组件中的数据

本质是properties和data没有区别，他们都指向同一个对象

五、数据监听器 Observers

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器，代码如下:

//html
<view>
  {
   
   {num}} + {
   
   {num1}} ={
   
   {sum}}
</view>
<button type="primary" bindtap="addFn1">num ++</button>

<button style="margin-top: 10rpx;" type="primary" bindtap="addFn2">num1 ++</button>


//js
  data: {
    num: 0,
    num1: 0,
    sum: 0
  },

 addFn1() {
      this.setData({
        num: this.data.num + 1
      })
    },
    addFn2() {
      this.setData({
        num1: this.data.num1 + 1
      })
    }

//监听器
  observers: {
    'num,num1': function (val_num, val_num1) {
      this.setData({
        sum: val_num + val_num1
      })
    },
  }

我们可以同时监听多个属性，用字符串包裹住要监听的属性就好了，

如果要监听的是一个对象，那么写法为 ' obj.num ，obj.num1 '

如果某个对象中需要被监听的属性太多，为了方便，可以使用通配符 ** 来监听对象中所有属性的变化

observers: {
' obj . ** ': function (obj) {
this.setData({
sum: obj.num + obj.num1
})
},
}

六、监听器实现RGB效果

完整代码

//html
<!--components/my_text2/my_text2.wxml-->
<view>
<view class="text" style="background-color:rgb({
   
   {fullColor}})">
  {
   
   {r}} - {
   
   {g}} - {
   
   {b}}
</view>
  <view class="btn_group">
    <button bindtap="changeR">R</button>
    <button bindtap="changeG" type="primary">G</button>
    <button bindtap="changeB" type="warn">B</button>
  </view>

</view>


//js
// components/my_text2/my_text2.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
    r: 0,
    g: 0,
    b: 0,
    fullColor: '0,0,0'
  },
  observers: {
    'r,g,b': function (r, g, b) {
      this.setData({
        fullColor: `${r},${g},${b}`
      })
    }
  },
  /**
   * 组件的方法列表
   */
  methods: {
    changeR() {
      this.setData({
        r: this.data.r > 250 ? 0 : this.data.r + 5
      })
    },
    changeG() {
      this.setData({
        g: this.data.g > 250 ? 0 : this.data.g + 5
      })
    },
    changeB() {
      this.setData({
        b: this.data.b > 250 ? 0 : this.data.b + 5
      })
    }
  }
})


//css
/* components/my_text2/my_text2.wxss */
.btn_group {
  display: flex;
  height: 100px;
  align-items: center;
  justify-content: space-evenly;
}

.btn_group button {
  width: 60px;
  height: 50px;
  line-height: 30px;
}

.btn_group button:nth-child(1) {
  background-color: red;
  color: #fff;
}

.btn_group button:nth-child(3) {
  background-color: rgb(0, 60, 255);
  color: #fff;
}

.text {
  text-align: center;
  height: 100px;
  line-height: 100px;
  font-size: 15px;
  color: #fff;

}

七、纯数据字段

纯数据字段 指的是那些 不用于界面渲染的 data 字段, 不能用于页面渲染
- 某些 data 中的字段 既不会被展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段
  
  纯数据字段有助于提升页面更新的性能

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个 正则表达式 ，字段名符合这个正则表达式的字段将会被视为纯数据字段

 options:{
    pureDataPattern:/^_/
  },

  data: {
    _r: 0,
    _g: 0,
    _b: 0,
    fullColor: '0,0,0'
  },

 observers: {
    '_r,_g,_b': function (r, g, b) {
      this.setData({
        fullColor: `${r},${g},${b}`
      })
    }
  },

八、组件生命周期

通常我们生命周期钩子放在lifetimes节点中，如果同时在Component和lifetimes中定义，那么lifetimes中的钩子优先级高于Component。

生命周期	参数	描述
`created`	`无`	`在组件实例刚刚被创建时执行`
`attached`	`无`	`在组件实例进入页面节点树时执行`
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
`detached`	无	`在组件实例被从页面节点树移除时执行`
error	`Object Error`	每当组件方法抛出错误时执行

最重要的生命周期是 created, attached, detached ，包含一个组件实例生命流程的最主要时间点。
- 组件实例刚刚被创建好时， created 生命周期被触发
  - 此时还不能调用 setData
  - 通常情况下，这个生命周期只应该用于给组件 this 添加一些自定义属性字段
- 在组件完全初始化完毕、进入页面节点树后， attached 生命周期被触发
  - this.data 已被初始化完毕
  - 这个生命周期很有用，绝大多数初始化工作可以在这个时机进行
- 在组件离开页面节点树后， detached 生命周期被触发
  - 退出一个页面时，会触发页面内每个自定义组件的detached 生命周期被触发
  - 如果组件还在页面节点树中，则 detached 会被触发。
  - 此时适合做一些清理性质的工作

组件所在页面的生命周期函数

自定义组件的行为依赖于页面状态的变化，此时就需要用到组件所在页面的生命周期

组件所在页面的生命周期函数，需要定义在 pageLifetimes 节点中

生命周期	参数	描述
show	无	组件所在的页面被展示时执行
hide	无	组件所在的页面被隐藏时执行
resize	`Object Size`	组件所在的页面尺寸变化时执行