【微信小程序】搭建项目步骤 + 引入Tdesign UI

目录

创建1个空文件夹,选择下图基础模板

开启/支持sass

创建公共style文件并引入

引入Tdesign UI:

1. 初始化:

2. 安装后,开发工具进行构建:

3. 修改 app.json

4. 使用

5. 自定义主题色


创建1个空文件夹,选择下图基础模板

开启/支持sass

在下图文件中添加配置,并更改文件后缀wxss改为scss

后面如果报错,重新打开一遍编辑器即可

创建公共style文件并引入

引入Tdesign UI:

1. 初始化:

npm init -y

安装包:如果很慢,可以指定国内源 

npm i tdesign-miniprogram -S --production
npm i tdesign-miniprogram -S --production --registry=https://registry.npmmirror.com/

2. 安装后,开发工具进行构建:

微信小程序开发工具 - 构建 npm

构建后,会在项目根目录下生成一个新的文件夹:miniprogram_npm

3. 修改 app.json

将 app.json 中的 "style": "v2" 移除。

因为 该配置 表示启用新版组件样式,将会导致 TDesign 的组件样式错乱。

4. 使用

以按钮组件为例,只需要在JSON文件中引入按钮对应的自定义组件即可

app.json中全局导入一次,就可以在任意页面中使用。

{"usingComponents": {"t-button": "tdesign-miniprogram/button/button"}
}

 如果是在某个页面中使用,则在对应的页面的json中导入即可

在页面(wxml)中使用

<t-button theme="primary">按钮</t-button>

使用其他组件,请看官方文档

注意:每使用一个,都需要导入一次。就像这样:

{"usingComponents": {"t-button": "tdesign-miniprogram/button/button","t-row": "tdesign-miniprogram/row/row","t-col": "tdesign-miniprogram/col/col"}
}

5. 自定义主题色

app.scss中添加:

page {/* 主题色 */--td-brand-color: #477afd;/* 成功 */--td-success-color: #43c902;/* 警告 */--td-warning-color: #f7b500;/* 失败 */--td-error-color: #ed1a2c;
}

效果:

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

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

谈谈 JS 中new的原理与实现

new 做了那些事&#xff1f;new 返回不同的类型时会有什么表现&#xff1f;手写 new 的实现过程 new 关键词的主要作用就是执行一个构造函数、返回一个实例对象&#xff0c;在 new 的过程中&#xff0c;根据构造函数的情况&#xff0c;来确定是否可以接受参数的传递。下面我们通…

python图像类型分类汇总

图型所在包样例例图热图seabornimport matplotlib.pyplot as plt import seaborn as sns sns.heatmap(df.isnull()) plt.show() Bitmap Bitmap import numpy as np # 获取数据 fraud data_df[data_df[Class] 1] nonFraud data_df[data_df[Class] 0] # 相关性计算 cor…

使用 import-linter 让你的 Python 项目架构更整洁

对于活跃的大型 Python 项目而言&#xff0c;维持架构的整洁性是一件颇具挑战的事情&#xff0c;这主要体现在包与包、模块与模块之间&#xff0c;难以保持简单而清晰的依赖关系。 一个大型项目&#xff0c;通常包含数以百记的子模块&#xff0c;各自实现特定的功能&#xff0…

【路径规划】在MATLAB中使用粒子群优化(PSO)进行最优移动机器人路径规划

摘要 本文介绍了使用粒子群优化&#xff08;Particle Swarm Optimization, PSO&#xff09;算法实现移动机器人的路径规划。PSO是一种基于群体智能的优化算法&#xff0c;通过模拟粒子群体在搜索空间中的迭代更新&#xff0c;找到全局最优路径。本文通过MATLAB仿真展示了PSO在…

python-小理帮老师改错

题目描述 老师给小理发了一封电子邮件&#xff0c;任务如下。 写一个程序&#xff0c;给你 n 个数&#xff0c;输出 X。 Xnum1^p1​​num2^p2​​⋯numn^pn​​ num1​&#xff0c;num2​&#xff0c;⋯⋯&#xff0c;numn​ 都是整数&#xff0c;p1​&#xff0c;p2​&#xf…

重大突破 谷歌DeepMind展示GenRM技术:AI推理能力的新里程碑

引言&#xff1a; 近日&#xff0c;谷歌DeepMind团队在arxiv平台上发表了一项突破性论文&#xff0c;正式推出了GenRM技术&#xff0c;这一创新成果显著提升了AI在复杂任务处理中的能力表现&#xff0c;再次跨越了技术界限&#xff0c;为人工智能的推理能力树立了崭新的标杆。 …

HMI触屏网关-VISION如何和OPC UA服务端通信

上文&#xff1a;HMI触屏网关-VISION如何与Node-red通信-CSDN博客 1. 准备工作 1.1. 创建OPC UA服务端 在与OPC UA服务端进行通信时&#xff0c;首先要确认服务端已就绪&#xff0c;本示例使用辅助软件1模拟OPC UA服务端。 1.2. 创建模拟点位 1.3. 测试通信 辅助软件2&…

【C语言从不挂科到高绩点】10-C语言中数组 01

Hello&#xff01;彦祖们&#xff0c;俺又回来了&#xff01;&#xff01;&#xff01;&#xff0c;继续给大家分享 《C语言从不挂科到高绩点》课程!! 本节课开始重点给大家讲讲C语言中的数组 本套课程将会从0基础讲解C语言核心技术&#xff0c;适合人群&#xff1a; 大学中开…

苹果手机显示“连接iTunes”是什么意思?

在日常使用苹果手机的过程中&#xff0c;有时我们可能会遇到屏幕突然显示“连接iTunes”的提示&#xff0c;这让不少用户感到困惑和不安。今天&#xff0c;我们就来深度解析一下这个提示的含义&#xff0c;并为大家提供详细的解决方案。 一、显示“连接iTunes”的含义 当苹果…

CasaOS系统本地安装Gopeed高速下载软件并实现异地远程访问下载文件

文章目录 前言1. 更新应用中心2.Gopeed安装与配置3. 本地下载测试4. 安装内网穿透工具5. 配置公网地址6. 配置固定公网地址 前言 本文主要介绍如何在轻NAS系统CasaOS小主机中安装支持全平台的高速下载器Gopeed&#xff0c;并结合内网穿透工具配置公网地址实现远程访问本地主机…

Nginx部署前端vue项目操作步骤和方法~小皮

部署前端Vue.js项目到Nginx上&#xff0c;是开发流程中至关重要的一步&#xff0c;它意味着将静态文件托管在Web服务器上&#xff0c;使应用程序能够被用户访问和交互。下面将详细介绍如何使用Nginx部署前端Vue项目的操作步骤和方法&#xff1a; 准备构建Vue项目 安装Node.js和…

在BrowserStack上进行自动化爬虫测试的终极指南

一、背景介绍 随着互联网的快速发展&#xff0c;数据变得越来越宝贵&#xff0c;爬虫技术已成为从网页中提取信息的重要工具。然而&#xff0c;在不同的环境中测试和运行爬虫脚本可能会带来挑战。尤其是在多浏览器、多平台的环境中确保爬虫的稳定性和兼容性是一个令人头疼的问…

HTTP 之 消息结构(二十二)

HTTP&#xff08;超文本传输协议&#xff09;是一种用于传输超媒体文档的协议&#xff0c;它定义了客户端和服务器之间请求和响应的消息结构。HTTP消息由一系列标准头部字段、一个空行和可选的消息体组成。 客户端请求消息 请求消息包括以下格式&#xff1a;请求行&#xff08;…

Flask_admin—快速搭建访客登记系统Web管理后台

简介&#xff1a;在《App Inventor 2—自制身份证识别及人证比对验证系统》和《MySQL—访客登记系统数据库及Web服务搭建》的基础上&#xff0c;通过在云服务器上的Python程序中使用Flask_admin扩展&#xff0c;快速搭建数据库Web管理后台。通过整合上述实验&#xff0c;了解全…

希尔排序的图解展示与实现

什么是希尔排序 对整个数组进行预排序&#xff0c;即分组排序&#xff1a;按间距为gap分为一组&#xff0c;分组进行插入排序。 预排序的作用与特点 大的数更快地到后面&#xff0c;小的数更快地到前面&#xff1b; gap越大&#xff0c;跳得越快&#xff0c;排完接近有序慢&…

电脑浏览器显示代理服务器拒绝连接的解决办法

问题&#xff1a; 打开电脑浏览器显示代理服务器拒绝连接 解决办法&#xff1a; 1、按住winq键&#xff0c;输入代理&#xff0c;出现更改代理设置 2、将下面的自动检测设置、使用设置脚本、使用代理服务器都设置为关闭&#xff0c;刷新网页即可

人工智能 | 大语言模型应用框架介绍

简介 大语言模型的英文全称为&#xff1a;Large Language Model&#xff0c;缩写为 LLM&#xff0c;也被称为大型语言模型&#xff0c;主要指的是在大规模文本语料上训练、包含百亿级别参数的语言模型&#xff0c;它用来做自然语言相关任务的深度学习模型。 自然语言的相关任…

【数学建模国赛赛前必看】参赛作品及MD5码提交流程

国赛参赛人数非常多&#xff0c;导致了很多时候我们没有办法正常的去上传论文&#xff0c;所以国赛就会有一个MD5码的上传过程&#xff0c;MD5码上传在国赛比赛当中是非常重要的。每年几乎都有5%左右的队伍会因为MD5码上传失败导致最终的论文交稿失败。所以我们今天具体的讲一下…

qt对象析构顺序记录

说明qt对象树 对象析构顺序为&#xff1a; 本对象的析构函数栈成员对象树中自己的孩子们对象树中自己的孙子们 所以&#xff0c;千万别在孩子对象中&#xff08;qt对象树特有的这个连带析构关系&#xff09;去访问父对象的任何栈成员&#xff08;包括堆成员&#xff09;的信息…

大模型产品经理学习路线,2024最新,从零基础入门到精通,非常详细收藏我这一篇

随着人工智能技术的发展&#xff0c;尤其是大模型&#xff08;Large Model&#xff09;的兴起&#xff0c;越来越多的企业开始重视这一领域的投入。作为大模型产品经理&#xff0c;你需要具备一系列跨学科的知识和技能&#xff0c;以便有效地推动产品的开发、优化和市场化。以下…