一、安装
先使用默认的基础模板生成一个空白小程序
这几个都可以
接下来要使用tdesign
,则需要用npm
安装
1、初始化生成package.json(没有的情况下)
命令行输入
npm init -y
2、终端再次输入如下安装指令
npm i tdesign-miniprogram -S --production
安装后,会在项目根目录下生成一个新的文件夹:node_modules
3、安装构建项目小程序开发工具(工具->构建npm)
构建后,会在项目根目录下生成一个新的文件夹:miniprogram_npm(
构建时若出现NPM packages not found
字样,请到 project.config.json
文件补充 packNpmManually
和 packNpmRelationList
配置项)
4、修改 app.json
将 app.json
中的 "style": "v2"
移除 不然会样式错乱
二、使用
1、以按钮组件为例,只需要在JSON
文件中引入按钮对应的自定义组件即可
在app.json
中全局导入一次,就可以在任意页面中使用。也可是在页面单独使用即在页面所在目录的json文件中使用"usingComponents":{"您需要引用的组件名":"tdesign-miniprogram/(具体组件路径)"}
示例:这里在仅在app.json全局引入展示 局部同理tdesign-miniprogra前面千万不要加“/”会报错
{
"usingComponents": {
"t-button": "tdesign-miniprogram/button/button"
}
}
2、在页面(wxml
)中使用
<t-button theme="primary">按钮</t-button>
可能的问题
1、导入后没有样式 (1)清除缓存重新编译(2) 开发工具右上角详情->本地设置->调试基础库切换基础库 (4)更新软软件
2.从官方的模版复制粘贴过来没有样式 可能有自定义组件检查一下
附链接:
TDesign UI:https://tdesign.tencent.com/miniprogram/getting-started
weui组件库:https://github.com/Tencent/weui