微信小程序：自定义组件，数据监听器的使用

提示：微信小程序自定义组件的使用，数据监听，小案例 slide（控制背景色rgb颜色变化）

---

前言

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、自定义组件的使用

创建自定义组件

类似于页面，一个自定义组件由 json wxml wxss js 4个文件组成。要编写一个自定义组件，首先需要在 json 文件中进行自定义组件声明（将 component 字段设为 true 可将这一组文件设为自定义组件）：

{
“component”: true
}

然后在pages文件中创建新的文件，wx.json文件中引入conmponents文件，同时，还要在 wxml 文件中编写组件模板，在 wxss 文件中加入组件样式

接着在wxml中使用

<!-- 这是自定义组件的内部WXML结构 -->
<!--pages/index/index.wxml-->
<nav></nav>

在wxss中编写样式

/* 这里的样式只应用于这个自定义组件 */
.my-class{
  color: aliceblue;
  background-color: rgb(255,0,0);
}
.my-fontSize{
  font-size: 100rpx;
}

component中定义： .js中 定义externalClasses: [‘my-class’,‘my-fontSize’],

component：.wxml中

二、微信小程序数据监听（observer）是什么？

1. 数据监听器可以用于监听和响应任何属性和数据字段的变化。
2. observer 用于监听和响应任何属性和数据字段的变化。可以同时监听多个。一次 setData 最多触发每个监听器一次。同时也可以监听子数据字段
3. observer 是基于自定义组件使用的
   示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

三、使用数据监听器

有时，在一些数据字段被 setData 设置时，需要执行一些操作。
例如， this.data.sum 永远是 this.data.numberA 与 this.data.numberB 的和。此时，可以使用数据监听器进行如下实现。

Component({
  attached: function() {
    this.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      this.setData({
        sum: numberA + numberB
      })
    }
  }
})

四.小案例（控制背景色的rgb改变）

主要指知识点：bindTap：在组件中绑定一个事件处理函数。 this.setdata({ }) :获取值 observers:数据侦听

<!-- 点击按钮增加rgb值 -->
<view class="bg" style="background-color: rgb({{bg}},{{bg2}},{{bg3}}) ">
  <button type="primary" bindtap="changebg" size="mini"> 改变背景色r</button>
  <button type="primary" bindtap="changebg2" size="mini"> 改变背景色g</button>
  <button type="primary" bindtap="changebg3" size="mini"> 改变背景色b</button>
</view>

data：中写上获取初始的数据 bg,bg2,bg3
observers:

自定义方法methods中；

    changebg() {
      this.setData({
        bg:  this.data.bg+ 10
      })
    },

那么点击按钮可以看到rgb值变化，背景也随之发生改变。

使用组件 slider优化：

使用组件 slider

<!-- 推拽 -->
<view class='box' style="background-color:rgb({{r}},{{g}},{{b}});width:100px;height:100px"></view>
<slider data-color="r" value='100' max="255" bindchanging='changeing'>红色</slider>
<slider data-color="g" value='200' max="255" bindchanging='changeing' >绿色</slider>
<slider data-color="b" value='255' max="255" bindchanging='changeing' >蓝色</slider>

methods中

    changeing(e){
      console.log(e.currentTarget.dataset)//标签设置的属性在这获取 currentTarget: {id: "", offsetLeft: 18, offsetTop: 110, dataset: {…}}

      let color = e.currentTarget.dataset.color
      let value = e.detail.value;
      this.setData({
        [color]:value
      })
    }

---