【微信小程序】自定义组件(一)

自定义组件

组件的创建与引用

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
      })
    }
  }
相关推荐
The_era_achievs_hero3 小时前
微信小程序71~80
微信小程序·小程序
dssxyz4 小时前
uniapp打包微信小程序主包过大问题_uniapp 微信小程序时主包太大和vendor.js过大
javascript·微信小程序·uni-app
!win !5 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app
澄江静如练_8 小时前
微信小程序发体验版
微信小程序·小程序
流口水的兔子12 小时前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
一念杂记12 小时前
免费开源!微信小程序商城源码,快速搭建你的线上商城系统!
微信小程序·uni-app
张晓~1833994812114 小时前
数字人源码部署流程分享--- PC+小程序融合方案
javascript·小程序·矩阵·aigc·文心一言·html5
The_era_achievs_hero16 小时前
微信小程序61~70
微信小程序·小程序
编程猪猪侠17 小时前
Taro+Vue3实现微信小程序富文本编辑器组件开发指南
vue.js·微信小程序·taro
汤姆yu1 天前
基于微信小程序的学校招生系统
微信小程序·小程序·招生小程序