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

自定义组件

      • 组件的创建与引用
          • 1、创建组件
          • 2、引用组件
          • 3、全局引用VS局部引用
          • 4、组件和页面的区别
      • 样式
          • 1、组件样式隔离
          • 2、组件样式隔离的注意点
          • 3、stylelsolation的可选值
      • 数据、方法和属性
          • 1、data数据
          • 2、methods方法
          • 3、properties
          • 4、data和properties区别
          • 5、使用setData修改properties的值
      • 数据监听器
          • 1、什么是数据监听器
          • 2、监听对象属性的变化

组件的创建与引用

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方法
methods: {addCount(){this.setData({count:this.data.count +1})this._showCount()},_showCount(){ //自定义方法建议以_开头wx.showToast({title: 'count值为' +this.data.count,icon:'none'})},}
3、properties
  properties: {//属性定义max:{  //完整定义属性的方式【当需要指定属性默认值时,建议使用此方式】type:Number, //属性值的数据类型value:10  //属性默认值},max:Number  //简化定义属性的方式【不许指定默认值时,可以使用简化方式】},
4、data和properties区别

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

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

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

 showInfo(){console.log(this.data);console.log(this.properties);console.log(this.data===this.properties);}
5、使用setData修改properties的值

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

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

数据监听器

1、什么是数据监听器

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

 observers:{'字段A,字段B':function(字段A的新值,字段B的新值){//do something}}
2、监听对象属性的变化

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/129868.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

maven之pom文件详解

一、maven官网 maven官网 maven官网pom文件详解链接 二、maven之pom 1、maven项目的目录结构 pom文件定于了一个maven项目的maven配置&#xff0c;一般pom文件的放在项目或者模块的根目录下。 maven的遵循约定大于配置&#xff0c;约定了如下的目录结构&#xff1a; 目录目…

基于Springboot+MYSQL+Maven实现的宠物医院管理系统(源码+数据库+运行指导文档+项目运行指导视频)

一、项目简介 本项目是一套基于springboot框架实现的宠物医院管理系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单…

MATLAB算法实战应用案例精讲-【图像处理】图像分割(最终篇)

目录 前言 图像分割发展历程 算法原理 阈值分割 1.1 全局阈值分割

【Kubernetes】初识k8s--扫盲阶段

文章目录 1、k8s概述2、为什么要有k8s2.1 回顾以往的应用部署方式2.2 容器具有的优势 3、k8s能带来什么 1、k8s概述 kubernetes是一个可移植、可扩展的开源平台&#xff0c;用于管理 容器化 的工作负载和服务&#xff0c;可促进申明式配置和自动化。kubernetes拥有一个庞大且快…

ElasticSearch深度解析入门篇:高效搜索解决方案的介绍与实战案例讲解,带你避坑

ElasticSearch深度解析入门篇&#xff1a;高效搜索解决方案的介绍与实战案例讲解&#xff0c;带你避坑 1.Elasticsearch 产生背景 大规模数据如何检索 如&#xff1a;当系统数据量上了 10 亿、100 亿条的时候&#xff0c;我们在做系统架构的时候通常会从以下角度去考虑问题&a…

【C语法学习】15 - fopen()函数

文章目录 1 函数原型2 返回值3 参数3.1 文件名3.2 模式3.2.1 以"r"模式打开3.2.2 以"w"模式打开3.2.3 以"a"模式打开3.2.4 以"r"模式打开3.2.5 以"w"模式打开3.2.6 以"a"模式打开 1 函数原型 fopen()&#xff1a…

右击显示Pycharm打开教程

效果图 操作流程 win r 输入 regedit 回车打开注册表编辑器 2.找到 shell 路径 计算机\HKEY_CLASSES_ROOT\Directory\shell3.在 shell 下新建项&#xff0c;名称为 Pycharm 单击Pycharm文件夹&#xff0c;双击默认项&#xff0c;修改默认值&#xff0c;这个数值就是你右击后…

OpenHarmony:4.0 Release版本的开发数据

OpenAtom OpenHarmony 4.0 Release版本于 10 月 27 日发布&#xff0c;经过了32周的开发周期。在此期间&#xff0c;有 65499 个 Committs 进入了 版本。在这个周期内完成了相当多的重要工作&#xff0c;本文阐释这些工作由谁完成。 这次共有 2220 位贡献者为 4.0 Release版本做…

【Linux】 shutdown 命令使用

shutdown 命令可以用来进行关机程序&#xff0c;并且在关机以前传送讯息给所有使用者正在执行的程序&#xff0c;shutdown 也可以用来重开机。使用权限&#xff1a;系统管理者。 语法 shutdown [选项] 时间 [警告信息] 命令选项及作用 执行令 man shutdown 执行命令结果 参…

计算虚拟化2——内存虚拟化

目录 物理机内存访问过程 虚拟地址VA和物理地址PA概念 MUU实现VA到PA所使用的映射表 内存虚拟化类型 内存软件辅助虚拟化 内存硬件辅助虚拟化 内存虚拟化-内存超分配 内存共享 内存置换 内存气泡 物理机内存访问过程 内存的基本知识 内存都是从物理地址0开始的&…

golang工程——opentelemetry简介、架构、概念、追踪原理

opentelemetry 简介 OpenTelemetry&#xff0c;简称OTel&#xff0c;是一个与供应商无关的开源可观测性框架&#xff0c;用于检测、生成、收集和导出 遥测数据&#xff0c;如轨迹、度量、日志。OTel的目标是提供一套标准化的供应商无关SDK、API和工具&#xff0c;用于接 收、…

阿里云免费服务器

文章目录 最近的阿里云活动By the way在云服务器ECS上搭建个人网站正文补充:定期释放补充:不知道阿里云服务器的密码怎么办?成果补充&#xff1a;怎么找到实例操作的后台&#xff1f;补充&#xff1a;怎么查看服务器到期时间&#xff1f; 究竟白嫖了多少&#xff1f;最后&…

模型推理加速与部署梳理

推理加速与部署 文章目录 推理加速与部署服务级别的推理加速模型级别的推理加速量化图优化 kernel级别的推理加速GPU常见优化方式特殊Kernel的优化方式 推理框架可供学习的框架 最近学的有点杂&#xff0c;梳理一下我的个人体系&#xff0c;接下来我会花一定时间梳理下面这些东…

【大数据】-- flink kubernetes operator 入门与实践

课程链接:https://edu.csdn.net/course/detail/38831 目录 课程链接:https://edu.csdn.net/course/detail/38831https://edu.csdn.net/course/detail/38831 一、你将收获

[论文笔记]RetroMAE

引言 RetroMAE,中文题目为 通过掩码自编码器预训练面向检索的语言模型。 尽管现在已经在许多重要的自然语言处理任务上进行了预训练,但对于密集检索来说,仍然需要探索有效的预训练策略。 本篇工作,作者提出RetroMAE,一个新的基于掩码自编码器(Masked Auto-Encoder,MAE)…

渲染流程之光栅化阶段及像素处理阶段

Rasterization 光栅化阶段&#xff1a;图元转换为像素&#xff0c;生成片段。 定义 把物体的数学描述以及与物体相关的信息转换为屏幕上用于对应位置的像素及用于填充像素的颜色这个过程成为光栅化 主要工作&#xff1a; 将得到的新图元&#xff08;添加额外的Virtex和计算图…

【leetcode】17.04 消失的数字

目录 1. 思路2. 代码 题目链接&#xff1a;leetcode 17.04.消失的数字 题目描述&#xff1a; 1. 思路 要求算法复杂度为O(n)&#xff0c;有两种方式&#xff1a; &#xff08;1&#xff09;利用异或交换律 与nums所有元素异或一遍&#xff1b;与0-n的值异或&#xff0c;n…

开源 | 30余套STM32单片机、嵌入式Linux、物联网、人工智能项目(开发板+教程+视频)

文末免费领取&#xff01; 30余套综合项目案例 STM32单片机、嵌入式、物联网、人工智能 项目文档源码视频 高校教学、学生毕设、个人项目练手 嵌入式实战项目推荐 15个嵌入式LinuxQt综合应用项目&#xff0c;涉及家居、医疗、农业等多种应用领域&#xff0c;案例中使用了嵌…

leetcode 2916. 子数组不同元素数目的平方和 II(区间更新 + 区间查询 线段树第二个板子 双闭区间 避开0)

描述 偷了一个线段树板子 不知道为啥要避开0 然后这里的更新和查找都是用双闭区间的 ac code class SegmentTree:def __init__(self, n):self.n n self.B1 [0]*n self.B2 [0]*n def add(self, b, idx, x):N self.n while idx < N:b[idx] xidx idx & -idxdef ra…

C++分治算法-------木材加工

木材厂有n根原木&#xff0c;现在想把这些木头切割成 k 段长度均为 l 的小段木头&#xff08;木头有可能有剩余&#xff09;。 当然&#xff0c;我们希望得到的小段木头越长越好&#xff0c;请求出的最大值。 木头长度的单位是cm&#xff0c;原木的长度都是正整数&#xff0c…