微信小程序开发:使用NPM方式构建引入TDesign UI框架和踩坑说明
ccwgpt 2024-09-23 04:17 21 浏览 0 评论
TDesign 是腾讯推出的一款企业级设计体系，它包含了一整套的设计规范、UI 组件库以及相关的工具和资源，旨在为开发者和设计师提供一个高效且一致的设计与开发解决方案。
特点
- 统一的设计价值观：TDesign 提倡包容、多元、进化和连接的价值观，以确保所有产品都能给用户提供一致性的体验。
- 丰富的组件库：提供了针对不同平台和技术栈的组件库，包括但不限于 Vue、React、小程序和 Flutter。
- 跨平台支持：支持桌面端 (PC) 和移动端 (Mobile) 应用程序，以及微信小程序等。
- 设计资源：提供了大量的设计资源和辅助工具，方便设计师进行快速原型设计和界面搭建。
接下来我们通过npm构建方式引入TDesign UI。（使用云开发的微信小程序项目作为演示）
步骤1：初始化npm
在微信小程序开发工具打开终端，执行npm init命令，命令执行结束后项目下生成package.json文件。
步骤2：project.config.json配置
使用微信小程序云开发配置：
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./miniprogram/"
}
],不使用微信小程序云开发配置：
"packNpmManually": true,
"packNpmRelationList": [
{
"packageJsonPath": "./package.json",
"miniprogramNpmDistDir": "./"
}
],区别就是配置小程序NPM目录，使用云开发若不配置"miniprogramNpmDistDir": "./miniprogram/"，会出现找不到UI组件。
步骤3：npm安装 TDesign
在终端执行npm i tdesign-miniprogram -S --production安装命令，命令执行成功项目目录下生成node_modules文件目录。
步骤4：npm构建
在微信小程序开发工具中点击工具菜单，然后点击构建npm，构建成功后项目下生成miniprogram_npm文件目录。值得注意的是这里有个Bug，步骤4安装组件后需要重启微信开发者工具，负责会出现npm构建失败。
步骤5：使用TDesign UI组件
将 app.json 中的 "style": "v2" 移除。
因为 该配置 表示启用新版组件样式，将会导致 TDesign 的组件样式错乱。
使用TDesgin Button按钮组件。在页面的.Json中声明组件：
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}接着就可以在 wxml 中直接使用组件，效果如图：
相关推荐
- 迈向群体智能 | 智源发布首个跨本体具身大小脑协作框架
-
允中发自凹非寺量子位|公众号QbitAI3月29日，智源研究院在2025中关村论坛“未来人工智能先锋论坛”上发布首个跨本体具身大小脑协作框架RoboOS与开源具身大脑RoboBrain，可实...
- 大模型对接微信个人号，极空间部署AstrBot机器人，万事不求百度
-
「亲爱的粉丝朋友们好啊！今天熊猫又来介绍好玩有趣的Docker项目了，喜欢的记得点个关注哦！」引言前两天熊猫发过一篇关于如何在极空间部署AstrBot并对接QQ消息平台的文章，不过其实QQ现在已经很少...
- Seata，让分布式事务不再是难题!实战分享带你领略Seata的魅力!
-
终身学习、乐于分享、共同成长！前言Seata是一款开源的分布式事务解决方案，致力于提供高性能和简单易用的分布式事务服务。Seata将为用户提供了AT、TCC、SAGA和XA事务模式，为用户打造一站式的...
- 常见分布式事务解决方案（分布式事务解决的问题）
-
1.两阶段提交（2PC）原理：分为准备阶段（协调者询问参与者是否可提交）和提交阶段（协调者根据参与者反馈决定提交或回滚）。优点：强一致性，适用于数据库层（如XA协议）。缺点：同步阻塞：所有参与者阻塞...
- 分布式事务:从崩溃到高可用，程序员必须掌握的实战方案!
-
“支付成功，但订单状态未更新！”、“库存扣减后，交易却回滚了！”——如果你在分布式系统中踩过这些“天坑”，这篇文章就是你的救命稻草！本文将手把手拆解分布式事务的核心痛点和6大主流解决方案，用代码实战+...
- 谈谈对分布式事务的一点理解和解决方案
-
分布式事务首先，做系统拆分的时候几乎都会遇到分布式事务的问题，一个仿真的案例如下：项目初期，由于用户体量不大，订单模块和钱包模块共库共应用（大war包时代），模块调用可以简化为本地事务操作，这样做只要...
- 一篇教你通过Seata解决分布式事务问题
-
1 Seata介绍Seata是由阿里中间件团队发起的开源分布式事务框架项目，依赖支持本地ACID事务的关系型数据库，可以高效并且对业务0侵入的方式解决微服务场景下面临的分布式事务问题，目前提供AT...
- Seata分布式事务详解(原理流程及4种模式)
-
Seata分布式事务是SpringCloudAlibaba的核心组件，也是构建分布式的基石，下面我就全面来详解Seata@mikechen本篇已收于mikechen原创超30万字《阿里架构师进阶专题合...
- 分布式事务最终一致性解决方案有哪些?MQ、TCC、saga如何实现?
-
JTA方案适用于单体架构多数据源时实现分布式事务，但对于微服务间的分布式事务就无能为力了，我们需要使用其他的方案实现分布式事务。1、本地消息表本地消息表的核心思想是将分布式事务拆分成本地事务进行处理...
- 彻底掌握分布式事务2PC、3PC模型（分布式事务视频教程）
-
原文：https://mp.weixin.qq.com/s/_zhntxv07GEz9ktAKuj70Q作者：马龙台工作中使用最多的是本地事务，但是在对单一项目拆分为SOA、微服务之后，就会牵扯出分...
- Seata分布式事务框架关于Annotation的SAGA模式分析
-
SAGAAnnotation是ApacheSeata版本2.3.0中引入的功能，它提供了一种使用Java注解而不是传统的JSON配置或编程API来实现SAGA事务模式的声明...
- 分布式事务，原理简单，写起来全是坑
-
今天我们就一起来看下另一种模式，XA模式！其实我觉得seata中的四种不同的分布式事务模式，学完AT、TCC以及XA就够了，Saga不好玩，而且长事务本身就有很多问题，也不推荐使用。S...
- 内存空间节约利器redis的bitmap(位图)应用场景有哪些你知道吗
-
在前面我们分享过一次Redis常用数据结构和使用场景，文章对Redis基本使用做了一个简单的API说明，但是对于其中String类型中的bitmap（位图）我们需要重点说明一下，因为他的作用真的不容忽...
- 分布式事务原理详解(图文全面总结)
-
分布式事务是非常核心的分布式系统，也是大厂经常考察对象，下面我就重点详解分布式事务及原理实现@mikechen本文作者：陈睿|mikechen文章来源：mikechen.cc分布式事务分布式事务指的是...
- 大家平时天天说的分布式系统到底是什么东西?
-
目录从单块系统说起团队越来越大，业务越来越复杂分布式出现：庞大系统分而治之分布式系统所带来的技术问题一句话总结：什么是分布式系统设计和开发经验补充说明：中间件系统及大数据系统前言现在有很多Java技术...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- MVC框架 (46)
- spring框架 (46)
- 框架图 (58)
- bootstrap框架 (43)
- flask框架 (53)
- quartz框架 (51)
- abp框架 (47)
- jpa框架 (47)
- laravel框架 (46)
- express框架 (43)
- springmvc框架 (49)
- 分布式事务框架 (65)
- scrapy框架 (52)
- java框架spring (43)
- grpc框架 (55)
- orm框架有哪些 (43)
- ppt框架 (48)
- 内联框架 (52)
- winform框架 (46)
- gui框架 (44)
- cad怎么画框架 (58)
- ps怎么画框架 (47)
- ssm框架实现登录注册 (49)
- oracle字符串长度 (48)
- oracle提交事务 (47)