当前位置: 首页 > news >正文

微信小程序入门学习02-TDesign中的自定义组件

目录

  • 1 显示文本
  • 2 自定义组件
  • 3 变量定义
  • 4 值绑定
  • 总结

我们上一篇讲解了TDesign模板的基本用法,如何开始阅读模板。本篇我们讲解一下自定义组件的用法。

1 显示文本

官方模板在顶部除了显示图片外,还显示了一段文字介绍。文字是嵌套在容器组件里,先按照他的写法复制代码到我们自己创建的index.wxml文件里

<view class="main"><view class="title-wrap"><image class="title-icon" mode="aspectFit" src="/assets/TDesignLogo@2x.png" aria-label="TDesign Logo" /></view><view> TDesign 适配微信小程序的组件库 </view>
</view>

因为我们的布局是从上到下,默认状态下view组件是块级布局,所谓的块级布局就是占满一行,为了看到具体的效果,我们给新添加的布局组件添加一个样式

 .desc{border:1px red solid}

然后在布局容器组件使用class属性引用我们的样式

<view class="desc"> TDesign 适配微信小程序的组件库 </view>

在这里插入图片描述
样式是增加了一个边框,可以看到新添加的这个容器组件是占满一行的

知道布局的原理后,给文本组件添加一些新的样式

.desc {color: rgba(0, 0, 0, 0.4);margin-top: 32rpx;font-size: 28rpx;font-weight: 400;line-height: 44rpx;margin-bottom: 48rpx;padding-left: 16rpx;padding-right: 16rpx;
}

首先是设置了文章的颜色,颜色模式我们使用了rgb来设置,每个位置的取值范围是0~255,最后一位是不透明度,取值是0 ~ 1,这样通过不透明度的设置我们就得到了一个灰色

其余的给了文本一定的内边距和外边距,同时设置了字体大小、字重和行高

在这里插入图片描述

2 自定义组件

接着官方模板引入了一个自定义组件

<pull-down-listwx:for="{{list}}"name="{{item.name}}"icon="{{item.icon}}"wx:key="name"childArr="{{item.childArr}}"bind:click="clickHandle"/>

这里的pull-down-list就是自定义组件,首先是要在我们的index.json文件里引入

{"usingComponents": {"pull-down-list": "../../components/pull-down-list/index"}
}

使用usingCompnents属性来标注我们使用了哪些组件,然后属性名表示我们组件的名称,属性值配置了自定义组件具体的路径

…/表示相对路径,这样就找到了根目录下的组件
在这里插入图片描述
一个自定义组件包含index.js、index.json、index.wxml、index.wxss

在index.json中声明这是一个自定义组件

{"component": true
}

在index.js里声明了组件有哪些属性,有哪些方法
在这里插入图片描述

3 变量定义

组件上需要设置一些属性,这些属性的值是通过变量进行赋值,变量我们在index.js里定义

官方模板的构造是使用了模块的导入导出来管理不同的菜单数据,先在index文件下建一个data文件夹,然后里边放置每个菜单的js

在这里插入图片描述
首先我们先阅读一下base.js

const base = {name: '基础',icon: 'app',childArr: [{name: 'Button',label: '按钮',},{name: 'Divider',label: '分割线',},{name: 'Fab',label: '悬浮按钮',},{name: 'Icon',label: '图标',},{name: 'Link',label: '链接',},],
};
export default base;

const关键字表示我们定义一个常量,等号表示赋值的意思,一对儿大括号表示这是一个对象,里边有name、icon、childArr这三个属性,name和icon是字符串,childArr是一个数组,数组里又放置了一系列对象属性

代码的最后一行通过export语句将base变量进行了导出

我们再看一下index.js

import base from './base';
import nav from './nav';
import display from './display';
import form from './form';
import ux from './ux';
export default [base, nav, form, display, ux];

先是用import关键字将每个js文件里导出的变量进行了导入,然后将几个变量合并到数组里进行导出

通过这样的代码组织方式,我们就比较合理的维护好了每个菜单的具体的值,然后在我们首页的index.js里引入我们定义的变量,放入到我们的data属性里

// pages/index/index.js
import list from './data/index';
Page({/*** 页面的初始数据*/data: {list},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(list)},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

凡是在页面上需要使用的变量我们都需要放入到data属性里,页面有生命周期函数,我们在页面加载方法里把我们的list打印一下看看究竟有哪些值

在这里插入图片描述
可以看到最终的list是一个有五个元素的数组,每个元素又有name、icon、childArr这三个属性

4 值绑定

在js中定义好变量之后,就需要在组件上使用,先是wx:for表示这是一个循环,需要传入一个数组,而我们的变量正好是一个数组,值绑定的时候需要使用双大括号的语法,标识我们里边的内容是一个变量

wx:for="{{list}}"

然后就要从循环中填充具体的属性,我们的循环体用item来表达,可以通过点的语法取具体的属性

最终的完整组件用法

<pull-down-listwx:for="{{list}}"name="{{item.name}}"icon="{{item.icon}}"wx:key="name"childArr="{{item.childArr}}"bind:click="clickHandle"/>

这里还有一个就是组件还可以绑定事件,是通过bind:click体现,现在是绑定了点击事件,传入的值是clickHandle

clickHandle需要在index.js的method里定义

// pages/index/index.js
import list from './data/index';
Page({/*** 页面的初始数据*/data: {list},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(list)},clickHandle(e) {let { name, path = '' } = e.detail.item;if (!path) {name = name.replace(/^[A-Z]/, (match) => `${match}`.toLocaleLowerCase());name = name.replace(/[A-Z]/g, (match) => {return `-${match.toLowerCase()}`;});path = `/pages/${name}/${name}`;}wx.navigateTo({url: path,fail: () => {wx.navigateTo({url: '/pages/home/navigateFail/navigateFail',});},});},/*** 生命周期函数--监听页面初次渲染完成*/onReady() {},/*** 生命周期函数--监听页面显示*/onShow() {},/*** 生命周期函数--监听页面隐藏*/onHide() {},/*** 生命周期函数--监听页面卸载*/onUnload() {},/*** 页面相关事件处理函数--监听用户下拉动作*/onPullDownRefresh() {},/*** 页面上拉触底事件的处理函数*/onReachBottom() {},/*** 用户点击右上角分享*/onShareAppMessage() {}
})

定义了方法之后就可以跳转到对应的页面,当然了我们看模板只需要看懂他具体的思路即可,在实际业务开发中事件里边具体的逻辑该如何写是由你的需求决定的,看模板是打开一个思路可以更好的完成业务逻辑的编写

总结

我们本篇解读了TDesign中如何使用自定义组件,当然了我们入门开发还不需要做的这么复杂,通常我们是调用组件库中的组件来帮助我们提效,等后续对自定义组件了解深入之后再自己扩展。

相关文章:

微信小程序入门学习02-TDesign中的自定义组件

目录 1 显示文本2 自定义组件3 变量定义4 值绑定总结 我们上一篇讲解了TDesign模板的基本用法&#xff0c;如何开始阅读模板。本篇我们讲解一下自定义组件的用法。 1 显示文本 官方模板在顶部除了显示图片外&#xff0c;还显示了一段文字介绍。文字是嵌套在容器组件里&#xf…...

【linux kernel】linux media子系统分析之media控制器设备

文章目录 一、抽象媒体设备模型二、媒体设备三、Entity四、Interfaces五、Pad六、Link七、Media图遍历八、使用计数和电源处理九、link设置十、Pipeline和Media流十一、链接验证十二、媒体控制器设备的分配器API 本文基于linux内核 4.19.4&#xff0c;抽象媒体设备模型框架的相…...

Scala--03

第6章 面向对象 Scala 的面向对象思想和Java 的面向对象思想和概念是一致的。 Scala 中语法和 Java 不同&#xff0c;补充了更多的功能。 6.1类和对象详解 6.1.1组成结构 构造函数: 在创建对象的时候给属性赋值 成员变量: 成员方法(函数) 局部变量 代码块 6.1.2构造器…...

【MongoDB】--MongoDB高级功能

目录 一、前言二、聚合管道aggregate1、示例说明2、具体代码实现一、前言 这里主要记录mongodb一些高级功能使用,如聚合。 二、聚合管道aggregate 聚合操作将来自多个文档的值组合在一起,并且可以对分组数据执行各种操作以返回单个结果,主要用于处理数据(诸如统计平均值,…...

C# new与malloc

目录 C# new与malloc C# new与malloc的区别 C# new关键字底层做的操作 C# new与malloc new关键字&#xff1a; new关键字在C#中用于实例化对象&#xff0c;并为其分配内存。它是面向对象编程的基本操作之一。使用new关键字可以在托管堆上分配内存&#xff0c;同时调用对象的构…...

微软MFC技术简明介绍

我是荔园微风&#xff0c;作为一名在IT界整整25年的老兵&#xff0c;今天来看一下微软MFC技术简明介绍 Visual C 与 MFC 微软公司于1992年上半年推出了C/C 7.0 产品时初次向世人介绍了MFC 1.0&#xff0c;这个产品包含了20,000行C原始代码&#xff0c;60个以上的Windows相关类…...

汽车电子Autosar之车载以太网

前言 近些年来&#xff0c;随着为了让汽车更加安全、智能、环保等&#xff0c;一系列的高级辅助驾驶功能喷涌而出。未来满足这些需求&#xff0c;就对传统的电子电器架构带来了严峻的考验&#xff0c;需要越来越多的电子部件参与信息交互&#xff0c;导致对网络传输速率&#x…...

MSP430_C语言例程注释详

本章选择了一些简单的C语言程序例题&#xff0c;这些程序的结构简单&#xff0c;编程技巧不多&#xff0c;题目虽然 简单&#xff0c;但是非常适合入门单片机的学习者学习MSP430单片机的C 语言编程。 如下列出了C语言例题运行的MSP430F149实验板硬件资源环境&#xff0c;熟悉…...

Vb+access库存管理系统(论文+开题报告+源代码+目录)

库存信息管理系统的基本问题1.1 库存信息管理系统的简介 本系统是为了提高腾达公司自动化办公的水平、经过详细的调查分析初步制定了腾达公司库存信息管理系统。基于WINDOWS 98 平台,使用Microsoft Access97, 在Visual Basic 6.0编程环境下开发的库存信息管理系统。该系统采用…...

Java 数组

在 Java 语言中&#xff0c;数组是一种基本的数据结构&#xff0c;可以存储一组相同类型的数据。本篇技术博客将详细介绍 Java 语言中的数组&#xff0c;包括一维数组和多维数组&#xff0c;以及数组的使用方法和注意事项。 一维数组 一维数组是指只有一行的数组&#xff0c;…...

CSDN 编程竞赛五十八期题解

竞赛总览 CSDN 编程竞赛五十八期&#xff1a;比赛详情 (csdn.net) 竞赛题解 题目1、打家劫舍 有一个小偷计划偷窃沿街的房屋&#xff0c;每间房内都藏有一定的现金&#xff0c;影响偷窃行为的唯一制约因素就是相邻的房屋装有相互连通的防盗系统。如果两间相邻的房屋在同一晚…...

Unity入门6——光源组件

一、参数面板 二、参数介绍 Type&#xff1a;光源类型 Spot&#xff1a;聚光灯 Range&#xff1a;发光距离Spot Angle&#xff1a;光锥角度Directional&#xff1a;方向光Point&#xff1a;点光源Area&#xff08;Baked Only&#xff09;&#xff1a;面光源 仅烘焙。预先算好&…...

C语言之动态内存分配(1)

目录 本章重点 为什么存在动态内存分配 动态内存函数的介绍 malloc free calloc realloc 常见的动态内存错误 几个经典的笔试题 柔性数组 动态内存管理—自己维护自己的内存空间的大小 首先我们申请一个变量&#xff0c;再申请一个数组 这是我们目前知道的向内存申请…...

AIGC新时代,注意政策走向,产业方向,拥抱可信AI。需要了解基本理论,基础模型,前沿进展,产品应用,以及小小的项目复现

AIGC&#xff08;AI-Generated Content&#xff0c;AI生成内容&#xff09;是指基于生成对抗网络&#xff08;GAN&#xff09;、大型预训练模型等人工智能技术的方法&#xff0c;通过对已有数据进行学习和模式识别&#xff0c;以适当的泛化能力生成相关内容的技术。类似的概念还…...

如何白嫖一年CSDN会员?618活动!亲测有效!!!

活动详情 CSDN会员免费送一年&#xff0c;仅剩3天&#xff01; 下载权益延长一年&#xff01; 一年一次的机会&#xff0c;错过了就要再等明年&#xff01; 博主已经领取到了&#xff01; 会员权益 1、修改专属域名&#xff0c;别人都是https://blog.csdn.net/qq_xxxxxxxx&a…...

微服务: 00-rabbitmq出现的异常以及解决方案

目录 前言: 问题概述: 1. rabbitmq初始安装配置异常 -> 1.1 rabbitmq报您与此网站连接不是私密连接 --->1.1.1 上述问题解决方案 ---> 1.1.2 依次执行下面代码 -> 1.2 解决用户的No access情况 -> 1.2.1 使用设置的账号密码进行登录 -> 1.2.2 点击 Ad…...

Vue3与Vue2比较

Vue.js 3相对于Vue.js 2带来了一些重大变化&#xff0c;其中包括一些语法变化。 下面是Vue.js 2和Vue.js 3的一些语法差异比较&#xff1a; 一、语法差异比较 1.组件的注册方式不同 在Vue.js 2中&#xff0c;我们使用Vue.component()或者Vue.extend()方式创建一个组件。但是…...

如何对待工作中的失误?

在日复一日的工作中&#xff0c;我们免不了会产生一些失误&#xff0c;会因此感到沮丧和失望。但如何正确地对待和处理这些失误才是最重要的&#xff0c;它直接影响到我们的工作表现和个人成长。一起来谈谈作为职场人的你时如何处理工作中的失误的吧&#xff01; 一、在面对失…...

使用css3如何实现一个文字打印效果

前言 在很多网站首页介绍页里,为了吸引用户,暂留更长时间,使用了一些css3动画的 示例效果 文字打印.gif 实现这个动画原理 想要实现这个动画,改变元素的宽度,结合动画css3关键帧实现 具体代码如下所示 <!DOCTYPE html> <html lang"en"><head><m…...

【雕爷学编程】Arduino动手做(115)---HB100多普勒雷达模块

37款传感器与执行器的提法&#xff0c;在网络上广泛流传&#xff0c;其实Arduino能够兼容的传感器模块肯定是不止这37种的。鉴于本人手头积累了一些传感器和执行器模块&#xff0c;依照实践出真知&#xff08;一定要动手做&#xff09;的理念&#xff0c;以学习和交流为目的&am…...

云原生核心技术 (7/12): K8s 核心概念白话解读(上):Pod 和 Deployment 究竟是什么?

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

模型参数、模型存储精度、参数与显存

模型参数量衡量单位 M&#xff1a;百万&#xff08;Million&#xff09; B&#xff1a;十亿&#xff08;Billion&#xff09; 1 B 1000 M 1B 1000M 1B1000M 参数存储精度 模型参数是固定的&#xff0c;但是一个参数所表示多少字节不一定&#xff0c;需要看这个参数以什么…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

Docker 运行 Kafka 带 SASL 认证教程

Docker 运行 Kafka 带 SASL 认证教程 Docker 运行 Kafka 带 SASL 认证教程一、说明二、环境准备三、编写 Docker Compose 和 jaas文件docker-compose.yml代码说明&#xff1a;server_jaas.conf 四、启动服务五、验证服务六、连接kafka服务七、总结 Docker 运行 Kafka 带 SASL 认…...

页面渲染流程与性能优化

页面渲染流程与性能优化详解&#xff08;完整版&#xff09; 一、现代浏览器渲染流程&#xff08;详细说明&#xff09; 1. 构建DOM树 浏览器接收到HTML文档后&#xff0c;会逐步解析并构建DOM&#xff08;Document Object Model&#xff09;树。具体过程如下&#xff1a; (…...

UR 协作机器人「三剑客」:精密轻量担当(UR7e)、全能协作主力(UR12e)、重型任务专家(UR15)

UR协作机器人正以其卓越性能在现代制造业自动化中扮演重要角色。UR7e、UR12e和UR15通过创新技术和精准设计满足了不同行业的多样化需求。其中&#xff0c;UR15以其速度、精度及人工智能准备能力成为自动化领域的重要突破。UR7e和UR12e则在负载规格和市场定位上不断优化&#xf…...

[Java恶补day16] 238.除自身以外数组的乘积

给你一个整数数组 nums&#xff0c;返回 数组 answer &#xff0c;其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法&#xff0c;且在 O(n) 时间复杂度…...

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

学校时钟系统,标准考场时钟系统,AI亮相2025高考,赛思时钟系统为教育公平筑起“精准防线”

2025年#高考 将在近日拉开帷幕&#xff0c;#AI 监考一度冲上热搜。当AI深度融入高考&#xff0c;#时间同步 不再是辅助功能&#xff0c;而是决定AI监考系统成败的“生命线”。 AI亮相2025高考&#xff0c;40种异常行为0.5秒精准识别 2025年高考即将拉开帷幕&#xff0c;江西、…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...