【微信小程序】自定义组件（一）

自定义组件

组件的创建与引用

1、创建组件

在项目的根目录中，鼠标右键，创建
components -> test文件夹
在新建的components -> test文件夹上，鼠标右键，点击"新建Component"
键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为js, json, .wxml 和.Wxss

注意:为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中

2、引用组件

局部引用

组件只能在当前被引用的页面内使用

在页面的json配置文件中引用组件的方式,叫做"局部引用"

全局引用

组件可以在每个小程序页面中使用

在app.json全局配置文件中引用组件的方式，叫做"全局引用"

3、全局引用VS局部引用

根据组件的使用频率和范围，来选择合适的引用方式:

🎞️如果某组件在多个页面中经常被用到，建议进行"全局引用"

🎞️🎞️如果某组件只在特定的页面中被用到，建议进行"局部引用"

4、组件和页面的区别

从表面来看，组件和页面都是由js、.json. .wxml 和.WXSS这四个文件组成的。但是,组件和页面的.js与json文件有明显的不同:

💥组件的 json文件中需要声明"component": true属性

💥💥组件的 js文件中调用的是Component()函数

💥💥💥组件的事件处理函数需要定义到methods节点中

样式

1、组件样式隔离

默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的UI结构

2、组件样式隔离的注意点

app.wxss 中的全局样式对组件无效
只有 class选择器会有样式隔离效果，id 选择器、

属性选择器、标签选择器不受样式隔离的影响

建议:在组件和引用组件的页面中建议使用class选
择器，不要使用id.属性、标签选择器!

3、stylelsolation的可选值

可选值	默认值	描述
isolated	是	表示启用样式隔离，在自定义组件内外，使用class指定的样式将不会相互影响
apply-shared	否	表示页面wxss样式将影响到自定义组件，但自定义组件WXSS中指定的样式不会影响页面
shared	否	表示页面Wwxss样式将影响到自定义组件，自定义组件WXss中指定的样式也会影响页面和其他设置了apply-shared或shared的自定义组件

数据、方法和属性

1、data数据

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

2、methods方法

javascript 复制代码

methods: {
    addCount(){
      this.setData({
        count:this.data.count +1
      })
    this._showCount()
    },
    _showCount(){ //自定义方法建议以_开头
       wx.showToast({
         title: 'count值为' +this.data.count,
         icon:'none'
       })
    },
    
  }

3、properties

javascript 复制代码

  properties: {
    //属性定义
    max:{  //完整定义属性的方式【当需要指定属性默认值时，建议使用此方式】
      type:Number, //属性值的数据类型
      value:10  //属性默认值
    },
    max:Number  //简化定义属性的方式【不许指定默认值时，可以使用简化方式】
  },

4、data和properties区别

在小程序的组件中，properties属性和data数据的用法相同，他们都是可读可写的，只不过：

data 更倾向于存储组件的私有数据

properties 更倾向于存储外界传递到组件中的数据

js 复制代码

 showInfo(){
      console.log(this.data);
      console.log(this.properties);
      console.log(this.data===this.properties);
    }

5、使用setData修改properties的值

由于data数据和properties属性在本质上没有区别，因此properties属性的值也可以用于页面渲染，或使用setDat为properties 中的属性重新赋值，

js 复制代码

  // <!-- 使用setData修改properties的值 -->
  properties:{ max:Number} //定义属性

数据监听器

1、什么是数据监听器

数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。他的作用类似于vue中的watch侦听器。在小程序组件中，数据监听器的基本语法格式入下：

js 复制代码

 observers:{
    '字段A，字段B':function(字段A的新值,字段B的新值){
      //do something
     }
  }

2、监听对象属性的变化

数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：

js 复制代码

Component({
	observers:{
		'对象:属性A，对象：属性B':function(){
			//触发此监听器 的3种情况
			//【为属性A赋值】使用setData 设置 this.data.对象.属性A 时触发	
			//【为属性B赋值】使用setData 设置 this.data.对象.属性B 时触发	
			//【直接为对象赋值】使用setData设置this.data.对象 时触发
			//do something
		}
	}
})

javascript 复制代码

 methods: {
    changeR(){ //修改rgb对象r属性的值
      this.setData({
        'rgb.r':this.data.rgb.r + 5>255 ?255 :this.data.rgb.r +5
      })
    },
    changeG(){ //修改rgb对象g属性的值
      this.setData({
        'rgb.g':this.data.rgb.g + 5>255 ?255 :this.data.rgb.g +5
      })
    },
    changeB(){  //修改rgb对象b属性的值
      this.setData({
        'rgb.b':this.data.rgb.b + 5>255 ?255 :this.data.rgb.b +5
      })
    }
  }