微信小程序自定义组件

article/2025/9/10 14:48:38

目录

一.自定义组件

1.创建自定义组件

2.声明组件

3.使用组件

 二.Tabs样式优化

 三.标题激活选中

 四.父向子组件传递数据

五.子向父传递数据

 六.自定义组件-slot

 七.自定义组件的其他属性


一.自定义组件

1.创建自定义组件

类似页面,一个自定义组件由json ,wxml,wxss,js 4个文件组成

 

2.声明组件

在需要引入组件的页面的json文件中,在usingComponents里面写键值对,写组件名和路径

3.使用组件

在需要引入组件的页面的wxml文件中,添加组件标签

效果:

 二.Tabs样式优化

wxml:

wxss:

js:

 效果:

 三.标题激活选中

1.页面.js文件中 存放事件回调函数的时候  存放在data同层级下

2.组件.js文件中 存放事件回调函数的时候 ,必须要存放在methods中!!!

      // 1.绑定点击事件  需要在methods中绑定

      // 2.获取被点击的索引

 

      // 3.获取原数组 

 

      // 4.对数组循环

      //    (1)给每一个循环项 选中属性 改为false

      //    (2) 给 当前的索引的项  添加激活选中效果就可以了

 

 四.父向子组件传递数据

父组件(页面)向子组件传递数据,通过标签属性的方式来传递

 (1)在子组件上进行接收

 (2)把这个数据当成是data中的数据直接用即可


1.在父组件的wxml文件中,在Tabs标签中添加属性,表示页面向子组件传递了属性aaa,值是a123a

2.在子组件的js文件中,在properties中接收父组件传递的数据,properties里面要填接收的数据的名称,这里的名称是aaa,aaa是个对象,里面写数据的类型和数据的值,数据的值不填就默认是上面的值“a123a",填了数据值,值就是我们写的那个值

 

 

3.在子组件的wxml中,使用数据的名称

效果:

 

父向子传递的过程

 

 传递tabs数据

1.将子组件的.js文件中data的tabs数组剪切,粘贴到父组件的.js文件 中

 2.父组件的wxml中传递tabs数据

 3.子组件.js文件中接收tabs数据

 4.使用数据的名称

 

 效果:

 优化:

问题:切换不同标题时,父组件的数据没有发送改变。原因是切换不同标题时会触发handleItemTap事件,然后this.setData的tabs会在子组件的data中拷贝了一份tabs,再次切换标题时,父组件中有tabs,子组件中也有tabs,两个tabs当然是不行的,发生改变的是子组件中的tabs,我们需要让父组件中的tabs发生改变

 

五.子向父传递数据

子向父传递数据,通过事件的方式传递

(1)在父组件的标签上加入一个自定义事件

 解决办法:将子组件中的索引传给父组件,然后父组件在它的方法中处理tabs,实现改变

 1.先注释掉子组件的.js文件中部分代码

2.在子组件的.js文件中触发父组件的自定义事件 同时传递数据 给父组件

 

3. 在父组件的wxml文件中绑定自定义事件

 4.在父组件的.js文件中写一个事件回调函数,接收传递过来的数据

5.将之前子组件.js文件中注释的代码复制粘贴到父组件的.js文件的回调函数中

效果:

 

 六.自定义组件-slot

slot 标签 ,其实就是一个占位符 , 插槽

等到父组件调用子组件的时候 ,再传递标签过来, 最终这些被传递的标签就会替换slot 插槽的位置

1.在子组件的wxml中使用slot标签

 2.在父组件的wxml文件中写标签,根据选中不同标题显示不同内容

 效果:

 

 七.自定义组件的其他属性

自定义组件文档


http://chatgpt.dhexx.cn/article/PJjdHDOh.shtml

相关文章

微信小程序npm引用ui框架

第一步:创建新的小程序,winR 输入cmd命令,进入小程序所在文件夹 第二步:在小程序根目录下输入 npm init 进行初始化 成功之后,会多一个package.json的文件 第三步: 接着执行两行命令 1、npm install --pr…

从0到一开发微信小程序(3)—小程序框架配置

文章目录 其他相关文章1、小程序框架1.1、全局配置1.1.1、Pages1.1.1.1、entryPagePath1.1.1.2、生成页面方式 1.1.2、window1.1.3、tabBar与属性1.1.4、常用其他配置1.1.4.1、sitemapLocation1.1.4.2、style1.1.4.3、networkTimeout1.1.4.4、debug1.1.4.5、functionalPages1.1…

微信小程序云开发教程-微信小程序框架的介绍

同学们大家好,我是小伊同学,今天我们来学习微信小程序框架。 微信小程序实质上是一款基于web技术的应用程序,他和我们平常所接触到的前端网页是大同小异的。相同点在于他们使用的开发语言,代码结构以及代码的运行机制是一样。但是…

uni-app框架、微信小程序项目

一、微信小程序项目发布 1.确定项目中没有bug,不能是demo; ​ 2.查看项目包大小; ​ 3.填写小程序基本信息,比如名称 头像 介绍 服务类目 ​ 4.注意配置域名白名单(微信公众平台----->开发----->开发管理----->服务器域名---->…

【微信小程序 | 实战开发】常用小程序框架介绍

写在前面: 你是否想要掌握人工智能的最新技术和应用?你是否想要成为未来社会的创新者和领导者?你是否想要和全球的优秀导师和同学一起学习和交流?如果你的答案是肯定的,那么欢迎来到床长人工智能教程网站,这里是你实现梦想的起点! 个人名片: 🐼作者简介:一名大二在校…

微信小程序云开发框架

概述 一直做后端服务器开发,最近看了一篇文章介绍小程序的云开发模式,觉得挺有意思,就尝试了一下,由本文做个记录。 因为不是专业的小程序开发人员,也没有做过网页开发,所以论述中出现错误难以避免&#…

原生微信小程序项目基础框架搭建

原生微信小程序项目基础框架搭建 文件目录结构 1. 环境变量(开发环境, 线上环境,测试环境)便于在不同环境的切换 接口的urlwebview的前缀url埋点相关的环境参数本地存储的环境变量配置 … 根目录中的 config 文件 中的 env.j…

开发跨端微信小程序框架选型指南

多端框架uni-app和Taro选型对比 一. 背景 小程序原生开发有不少槽点: 1.原生wxml开发对Node、预编译器、webpack支持不好,影响开发效率和工程构建流程。所以大公司都会用框架开发 2.微信定义的这套语法,wxml、wxs,以及wx:if等语…

微信小程序 微信小程序框架API

完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架所提供的API接口也是相当完备的,如果说小程序组件是用来构建小程序的视图层,那么小程序API则在小程序逻辑层担当重任。随着小程序版本的更新迭代,目前小程序框架 API分类已经达到了19…

微信小程序框架(一)-全面详解(学习总结---从入门到深化)

目录 小程序与普通网页开发的区别 体验小程序 微信小程序账号申请 微信小程序开发者工具 下载安装 创建项目 开发者工具说明 小程序目录结构 描述整体的 app 描述各自页面的 page 全局配置_Pages Pages配置 entryPagePath 快捷生成页面方案 全局配置_window 常用属性…

微信小程序学习笔记(二)-- 开发之框架

一、小程序框架介绍(了解) 小程序框架包含小程序的配置、框架接口、场景值、WXML 和 WXS 等 二、小程序的配置(精通) 小程序的配置分为全局配置、页面配置以及sitemap 配置 1、全局配置 小程序根目录下的 app.json 文件用来对…

微信小程序框架

框架 小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。 整个小程序框架系统分为两部分:逻辑层(App Service)和 视图层(View)。小程序提供了自己的视图层描述语言…

【微信小程序】小程序框架分析

1.MVC MVC是Model-View- Controller的简写,即模型-视图-控制器,简单来说就是通过controller的控制去操作model层的数据,并且返回给view层展示。 当用户出发事件的时候,view层会发送指令到controller层,接着controller去通知mode…

微信小程序常见的UI框架/组件库总结

图片 想要开发出一套高质量的小程序,运用框架,组件库是省时省力省心必不可少一部分,随着小程序日渐火爆,各种不同类型的小程序也渐渐更新,其中不乏一些优秀好用的框架/组件库。 1:WeUI 小程序–使用教程 ht…

强烈推荐:小程序常用的6款框架总结

随着前端的知识不断更新,小程序也成为了我们开发中的日常。微信小程序、百度小程序、支付宝小程序、头条小程序等等不断涌入我们的生活,随着小程序的火爆,各种小程序框架不断出现,也在不断更新。路漫漫,学不完呀&#…

微信小程序框架介绍以及项目目录结构

完整微信小程序(Java后端) 技术贴目录清单页面(必看) 微信小程序框架介绍 微信团队为小程序提供的框架命名为MINA。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能,对上层提供一整套JavaScript API&am…

爬虫入门

爬虫入门 1. 概述 本文首先介绍Requests库如何自动爬取HTML页面以及如何自动网络请求提交,随后将会讲解如何阅读网络爬虫排除标准。获取了网页之后用BeautifulSoup库解析HTML页面,然后讲解正则表达式,以及如何用正则表达式提取网页关键信…

一个简单爬虫的入门教程

前言 我毕业论文要写文本大数据情绪分析,没有现成的数据。淘宝要价600块我又舍不得,只能自学爬虫。我一点计算机网络的基础都没有,光是入门就花了一周(不知道从何下手),所幸爬虫不难,只要见过就…

python爬虫入门教程:开始一个简单的爬虫

本文下面所有的Python基础都有详细的配套教程以及源码,都已经打包好上传到百度云了,链接在文章结尾处! 扫码此处领取大家自行获取即可~~~ 1.爬虫的过程分析 当人类去访问一个网页时,是如何进行的?   ①打开浏览器&…

从原理到实战,一份详实的 Scrapy 爬虫教程

之前分享了很多 requests 、selenium 的 Python 爬虫文章,本文将从原理到实战带领大家入门另一个强大的框架 Scrapy。如果对Scrapy感兴趣的话,不妨跟随本文动手做一遍! 一、Scrapy框架简介 Scrapy是:由Python语言开发的一个快速、高层次的屏幕…