【原创】微信小程序添加TDesign组件

前言

在这里插入图片描述

TDesign 是腾讯公司推出的一款UI界面库,至于腾讯的实力嘛,也不用多说了。
官网:https://tdesign.tencent.com/
源码:https://github.com/Tencent/tdesign
目前处于活跃状态,发文前5日,该库仍在更新中…

遇到的问题

虽然腾讯为微信小程序开发提供了一个讨论的论坛,官方基本上认为开发者都是大牛。最惨的是小白,满眼看到的都是高深的垃圾。
如何将腾讯自家的 TDesign 集成到微信小程序中?无论是开发者论坛,还是TDesign介绍中,都讲了个大概,也就是说只照顾了哪些高手们,至于小白嘛…,等你成为高手后,再来看的时侯就懂了。

关于微信小程序模板

首先,基于JS的,目前逐渐再淘汰中,官方的模板就只有两个。
刚学习的时候可以用一用,但是像样点的基本上都不用,原因是JS本身的缺陷导致的。
在这里插入图片描述
基于TS的基础模板有四个。其中Sass大行其道,逐步替代Less,加上Skyline虽然优秀,但不如传统的WebView成熟。因此,开发最多还是选择TS+Sass的基础模板。
再看下面的几个模板。
在这里插入图片描述
从模板名称就可以看出,这些模板中已经内置了TDesign组件。如果你使用这些模板创建微信小程序项目,项目示例中已经添加了TDesign组件,而且提供了很好的演示代码。但是使用这些模板创建的项目中,要删除的东西太多。那倒不如创建一个纯洁的、纯粹的微信小程序,然后在这个基础上一步步集成TDesign组件。

创建微信小程序

按照如下步骤,创建一个微信小程序项目
在这里插入图片描述
首先,我们来看看文件结构
在这里插入图片描述
第一层:微信小程序的项目名称,这用了大写。MINIPROGRAME-2
第二层:miniprogram,这个才是微信小程序的主战场。
第二层:typings,这个是腾讯为微信写的一些库函数(API),miniprogram-api-typings,但是比较旧。

升级miniprogram-api-typings

在这里插入图片描述
还需要修改一下调试基础库,这个也默认比较旧。
在这里插入图片描述
我们要把他选成最新的。
还有两个地方需要勾选
1、将JS编译成ES5
2、不校验合法域名、web-wiew(业务域名)、TLS版本及HTTPS证书。
点击“推送”。

在终端中执行npm update后,发现这个以来库要升级,当前要升级到4.1.0版本。
在这里插入图片描述
如果照着改了,然后再执行“npm install”,你会发现报错依然不会消除。
但是在第一层目录中多了一个node_modules目录,在它的下面多了一个miniprogram-api-typings文件夹。
也就是说,如果你按照提示操作的话,结果就是放错位置了。
这个问题

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

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

相关文章

Vue的路由模式的区别和原理

路由模式 Vue 的路由模式指的是 Vue Router 提供的 URL 处理方式,主要有两种:Hash 模式和History 模式。 Hash模式 在 Vue Router 中,默认使用的是 hash 模式,即 mode: hash。如果想要使用 history 模式,可以设置 mode…

通过TPLink路由器进行用户行为审计实战

用户行为审计是指对用户在网络平台上的行为进行监控和记录,以便对其行为进行分析和评估的过程。随着互联网的普及和发展,用户行为审计在网络安全和数据隐私保护方面起到了重要的作用。 用户行为审计可以帮助发现和预防网络安全威助。通过对用户的行为进行…

MYSQL 第一次作业

新建产品库mysql> CREATE DATABASE mydb6_product;使用产品库mysql> USE mydb6_product;创建employess表mysql> CREATE TABLE employees (-> id INT PRIMARY KEY,-> name VARCHAR(50) NOT NULL,-> age INT,-> gender VARCHAR(10) NOT NULL DEFAULT unknow…

暑期前端训练day7——有关vue-diff算法的思考

前言 今天分享一下我对vue的diff的探究,跟我一起深入底层,看一看vue是怎么进行diff的,它的复杂度如何,为什么性能这么高,diff的目标是尽可能的复用原来的真实dom,减少删除真实dom和创建真实的dom的开销&…

【Docker】Docker的初步认识以及Ubuntu下的Docker环境安装、配置

前言 在当今快速迭代的软件开发与部署领域,容器化技术已成为不可或缺的核心力量,而 Docker 作为容器化技术的杰出代表,正以其轻量、高效、可移植的特性深刻改变着开发与运维的模式。它有效解决了 “在我机器上能运行,在你那里却不…

【密码学】2. 古典密码

目录2. 古典密码2.1 经典加密技术基础2.2 代换技术2.2.1 算术密码2.2.2 代换密码(Substitution Cipher)2.3 置换技术2.4 乘积密码2.5 历史上的教训2. 古典密码 2.1 经典加密技术基础 分类 代换(Substitution):明文内…

CSS3文本阴影特效全攻略

CSS3文本阴影效果实现 下面我将创建一个展示各种CSS3文本阴影效果的页面&#xff0c;包含多种样式示例和代码实现。 设计思路 创建具有视觉吸引力的标题区域提供多种文本阴影效果实例显示对应的CSS代码以供参考添加交互元素让用户自定义效果 实现代码 <!DOCTYPE html&g…

JavaScript 03 严格检查模式Strict字符串类型详解

2.4 严格检查模式Strict在 JavaScript 里&#xff0c;也是 有 “作用域” 这个说法的。 所以说&#xff0c;变量 也分 全局变量 和 局部变量。 当我们 直接 把 代码 写在 script 双标签里面的时候&#xff0c;我们 JS 会认为 这只是 一个 没有名字的 函数&#xff01;&#xff…

车载诊断ECU架构

我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 做到欲望极简,了解自己的真实欲望,不受外在潮流的影响,不盲从,不跟风。把自己的精力全部用在自己。一是去掉多余,凡事找规律,基础是诚信;二是…

使用vue-pdf-embed发现某些文件不显示内容

在使用vue-pdf-embed过程中, 突然发现有些pdf文件可以正常打开, 有些文件只显示了一些数字, 并且控制台报出如下警告: Warning: loadFont - translateFont failed: “UnknownErrorException: Ensure that the cMapUrl and cMapPacked API parameters are provided.”. Warning…

【设计模式C#】状态模式(用于解决解耦多种状态之间的交互)

一种行为设计模式。特点是用类的方式去管理状态。优点&#xff1a;对每个状态进行了封装&#xff0c;提高了代码的可维护性&#xff1b;减少了条件判断语句的使用&#xff0c;降低维护成本&#xff1b;易于扩展&#xff0c;每次新增状态都无需大规模修改其他类&#xff0c;符合…

WebSocket数据通过splice保持现有DOM结构仅更新文本内容‌【防闪烁】。

文章目录 前言 一、DOM更新优化机制 ‌1.虚拟DOM复用性 2.‌响应式系统触发 二、性能对比 三、WebSocket场景实践 ‌1.防闪烁原理 2.代码实现示例 四、特殊注意事项 总结 前言 开发过程中渲染websocket返回的数据时&#xff0c;经常会遇到更新数据闪烁的问题&#xff0c;咱们可…

深入解析Hadoop的Block多副本同步机制与Pipeline复制

Hadoop分布式文件系统概述作为Hadoop生态的核心存储组件&#xff0c;HDFS&#xff08;Hadoop Distributed File System&#xff09;的设计哲学源于Google File System论文&#xff0c;其架构专门针对大规模数据集处理场景进行了优化。在理解Block多副本同步机制之前&#xff0c…

洪水预报中的序列到序列模型及其可解释性扩展

洪水预报中的序列到序列模型及其可解释性扩展 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&#xff0c;风趣幽默&#xff0c;忍不住分享一下给大家&#xff0c;觉得好请收藏。点击跳转到网站。 1. 引言 洪水预报是水文科学和灾害管理中的重要课题&#xff…

UniApp 优化实践:使用常量统一管理本地存储 Key,提升可维护性

在 UniApp 项目开发中&#xff0c;随着功能的增加&#xff0c;本地存储&#xff08;如 uni.setStorageSync&#xff09;的使用频率也会增加。如果直接在代码中硬编码 key 值&#xff0c;不仅容易出错&#xff0c;也难以后期维护。本文将以“自定义导航栏适配状态栏高度”为例&a…

计算机网络:(八)网络层(中)IP层转发分组的过程与网际控制报文协议 ICMP

计算机网络&#xff1a;&#xff08;八&#xff09;网络层&#xff08;中&#xff09;IP层转发分组的过程与网际控制报文协议 ICMP前言一、IP层转发分组的过程第一步&#xff1a;接收数据包并解封装第二步&#xff1a;提取目标 IP 地址第三步&#xff1a;查询路由表第四步&…

Python爬虫实战:研究concurrent-futures库相关技术

1. 引言 1.1 研究背景与意义 网络爬虫作为互联网数据采集的重要工具,在信息检索、舆情分析、学术研究等领域具有广泛应用。随着互联网数据量的爆炸式增长,传统单线程爬虫的效率已难以满足需求,并发爬虫技术成为研究热点。 1.2 相关工作 现有爬虫框架如 Scrapy、Beautifu…

Neo4j 框架 初步简单使用(基础增删改查)

Neo4j 是一个高性能的、开源的图数据库。它将数据存储为图结构&#xff0c;其中节点表示实体&#xff0c;边表示实体之间的关系。这种图数据模型非常适合处理复杂的关系型数据&#xff0c;能够高效地进行关系查询和遍历。 Neo4j 的主要特性包括&#xff1a; 强大的图查询语言 C…

【iOS】锁[特殊字符]

文章目录前言1️⃣什么是锁&#x1f512;&#xff1f;1.1 基本概念1.2 锁的分类2️⃣OC 中的常用锁2.1 OSSpinLock&#xff08;已弃用&#xff09;&#xff1a;“自旋锁”的经典代表为什么尽量在开发中不使用自旋锁自旋锁的本质缺陷&#xff1a;忙等待&#xff08;Busy Waiting…

在easyui中如何设置自带的弹窗,有输入框

这个就是带input的确认弹框&#xff08;$.messager.prompt&#xff09;// 使用prompt并添加placeholder提示 $.messager.prompt(确认, 确定要将事故记录标记为 statusText 吗&#xff1f;, function(r) {if (r) {// r 包含用户输入的内容var remark r.trim();// 验证输入不为…