关键词：

原来小程序开发有组件库选择的问题，可以使用WeUI或者Vant。今年腾讯开源了前端的框架TDesign，我也分享了两篇使用文章。

年初分享的主要是PC端的框架，除了有PC端的框架外，最近TDesign又新出了小程序的框架，组件比较丰富，今天就带着大家体验一下。

1 创建小程序

用微信扫码登录微信开发者工具，登录之后点击+号来创建项目

创建项目时，先需要填入项目名称，选择程序存放的目录，填入appid，后端选择不使用云服务，模板的话选择Javascript-基础模板

2 微信开发者工具介绍

创建好项目之后可以看到微信开发者工具的一个界面，界面是包含几个区域

导航条有默认的各种各样的功能，预览区是我们小程序编译之后的效果，文件区域我们可以创建各种各样的文件，代码编辑区可以写代码，调试区可以显示各种调试信息。

有的开发者喜欢用vscode或者uniapp来开发小程序，我呢还是喜欢原生的工具，我们只是需要最终的结果，选哪种工具最终的结果都是一样的。

3 项目的初始化

我们现在使用模板是一个空白的项目，如果需要使用TDesign的，我们先需要做初始化，生成package.json文件

在调试区，切换到终端

点击新建终端

在光标的位置输入如下命令

npm init

一路按回车，完成package.json的创建

4 安装TDesign

在终端的命令行继续输入如下的命令

npm i tdesign-miniprogram -S --production

安装成功后可以在文件区域看到多了一个node_modules

按照官方文档的指引是要求做npm的构建，在导航条上找到工具，在工具下找到构建npm

构建成功后在文件区域会多了一个miniprogram_npm的文件夹

5 全局引入或者局部引入组件

我们引入这个库就是为了使用，如果全局引入，就修改app.json，用哪个组件就引入哪个组件，比如我们需要使用Button组件，按如下引入

  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "usingComponents": 
    "t-button": "tdesign-miniprogram/button/button",
    "t-button-group": "tdesign-miniprogram/button-group/button-group"
  ,
  "window":
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  ,
  "style": "v2",
  "sitemapLocation": "sitemap.json"

然后我们在index.wxml里增加按钮组件的代码，查看效果

<!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <block wx:if="canIUseOpenData">
      <view class="userinfo-avatar" bindtap="bindViewTap">
        <open-data type="userAvatarUrl"></open-data>
      </view>
      <open-data type="userNickName"></open-data>
    </block>
    <block wx:elif="!hasUserInfo">
      <button wx:if="canIUseGetUserProfile" bindtap="getUserProfile"> 获取头像昵称 </button>
      <button wx:elif="canIUse" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
      <view wx:else> 请使用1.4.4及以上版本基础库 </view>
    </block>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="userInfo.avatarUrl" mode="cover"></image>
      <text class="userinfo-nickname">userInfo.nickName</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">motto</text>
  </view>
  <t-button t-class="external-class" theme="primary" block disabled="disabled">强按钮</t-button>
</view>

如果只是页面中使用，可以在index.json里引入，引入的原理是一样的，这样就完成了一个组件库的搭建

6 总结

我们本篇介绍了如何在小程序中使用TDesign组件库，在开发中我们总是寻找一些现成的解决方案来提高开发效率，重复造轮子也可以，前提是你造的比别人好，而且用的人也多。本篇我们就分享到这，我们下次再见。

作者简介：用了三年时间研究了微信小程序、微信云开发、微搭的技术体系，后续持续分享小程序开发的相关教程，敬请关注

微信小程序组件库解析：图片上传与排序组件yimgpro(代码片段)

yunUI是笔者开源的微信小程序功能库。目前其中包含了一些复杂的功能组件。方便使用。未来它将分为组件、样式、js三者合为一体，但分别提供。本文所用代码皆来源于组件库中的yImgPro组件。详细代码可至github查看。地址：yunU... 查看详情

tdesign开发流程体验(代码片段)

今天刷朋友圈，发现都在转发TDesign，出于好奇心，看了一下是个啥。官方体验地址：https://tdesign.tencent.com/浏览了一下应该是一套前端的UI框架，去年我研究了elemnetui和antd，这两个UI框架各有千秋吧。今年... 查看详情

一个非常实用的小程序组件库(代码片段)

一个实用的小程序组件库Hi，大家好，我们团队最近做了个小程序的组件库，v1.1.0版本已经发布了，欢迎大家使用，并提出宝贵意见。github地址组件github：https://github.com/Chaunjie/k...使用demo可以参考下：https://github.com/stardew516...欢... 查看详情

微信小程序组件库开发记录(代码片段)

微信小程序组件库开发记录背景前言技术选型环境搭建安装gulp将`scss`编译为`wxss`压缩`wxml`，`js`，`json`文件和图片拷贝文件到另一个目录删除目录整合创建组件模板开发技巧properties父组件给... 查看详情

基于tdesign风格的blazor企业级ui组件库

...不了需要封装UI控件，所以今天给大家推荐一套基于TDesign风格的Blazor企业级UI组件库。项目简介这是一套基于TDesign的Blazor企业级组件库，TDesign是腾讯内部经过多年提炼总结的，其UI漂亮、通用性较强，使用该框架&... 查看详情

tdesign开发流程体验番外篇(代码片段)

上次发了一篇TDesign开发流程体验，没想到在写到安装步骤的时候翻车了，CSDN里的解决方案都试了，没有可以解决的。你说刚试一个新产品就翻车了不甘心啊，于是浏览了一下老外的解决方案，看到是产品上的... 查看详情

微信小程序自定义组件详解(代码片段)

微信小程序自定义组件详解自定义组件能够帮我们更好的复用代码和重构简化代码复杂度。一起来学习一下小程序自定义组件的内容吧。从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都... 查看详情

微信小程序集成weui组件库(代码片段)

1、引入nmp依赖（前提是已经安装了nmp）在小程序根目录（app.js所在目录），打开cmd，输入：npminit-y，回车初始nmp然后再输入：npmiminiprogram-sm-crypto--production，下载miniprogram依赖2、勾 查看详情

微信小程序｜组件库自定义swiper组件(代码片段)

...～ 自我介绍ଘ(੭ˊᵕˋ)੭昵称：海轰标签：程序猿｜C++选手｜学生简介：因C语言结识编程，随后转入计算机专业，有幸拿过国奖、省奖等& 查看详情

n年沉淀，腾讯这套系统终于开源！(代码片段)

...，终于能介绍自己公司的项目了。如官方描述，TDesign是一套拥有完整的设计价值观和视觉风格指南的企业级设计体系，并且在此基础上，提供了基于Vue、React、小程序等业界主流技术栈的组件库解决方案，主... 查看详情

微信小程序-自定义导航组件(代码片段)

一、如何自定义组件从小程序基础库版本1.6.3开始，小程序支持简洁的组件化编程。所有自定义组件相关特性都需要基础库版本1.6.3或更高。开发者可以将页面内的功能模块抽象成自定义组件，以便在不同的页面中重复使... 查看详情

小程序-文章：微信小程序常见的ui框架/组件库总结

ylbtech-小程序-文章：微信小程序常见的UI框架/组件库总结 1.返回顶部1、想要开发出一套高质量的小程序，运用框架，组件库是省时省力省心必不可少一部分，随着小程序日渐火爆，各种不同类型的小程序也渐渐更新，其中不... 查看详情

总结下htmlcss的一些东西(代码片段)

...Cookie，动画，网络请求等。每个函数将值返回给调用应用程序，但是你从中可以选择参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，的英文特定而且于某一方面的集合（方法和函数），库没有控制权，控... 查看详情

自己的微信小程序学习笔记——第三方ui库lin-ui的加载及使用(代码片段)

其他微信小程序的学习笔记自己的微信小程序学习笔记【1】——小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记【2】——从零开始新建项目文章目录其他微信小程序的学习笔记前言一、Lin-UI组件库1.使用组件... 查看详情

微信小程序加vant组件库弹窗的使用及遇到的问题(代码片段)

小程序阻止事件冒泡：将子类的点击事件bindtap写成catchtap避免出现子级按钮点击出现弹窗触发了父级的同类型bindtap事件使用dialog需要在json中"van-dialog":“@vant/weapp/dialog/index”,引入在js中importDialogfrom‘…/…/miniprogram_n... 查看详情

微信小程序加vant组件库弹窗的使用及遇到的问题(代码片段)

小程序阻止事件冒泡：将子类的点击事件bindtap写成catchtap避免出现子级按钮点击出现弹窗触发了父级的同类型bindtap事件使用dialog需要在json中"van-dialog":“@vant/weapp/dialog/index”,引入在js中importDialogfrom‘…/…/miniprogram_n... 查看详情

自己的微信小程序学习笔记——第三方ui库lin-ui的加载及使用(代码片段)

其他微信小程序的学习笔记自己的微信小程序学习笔记【1】——小程序开发工具的使用及项目文件说明自己的微信小程序学习笔记【2】——从零开始新建项目文章目录其他微信小程序的学习笔记前言一、Lin-UI组件库1.使用组件... 查看详情

微信小程序代码片段分享

ThorUI组件库，微信小程序源码分享 查看详情