120 lines
5.3 KiB
Markdown
120 lines
5.3 KiB
Markdown
|
|
|||
|
|
<p align="center">
|
|||
|
|
<a href="https://tdesign.tencent.com/" target="_blank">
|
|||
|
|
<img alt="TDesign Logo" width="200" src="https://tdesign.gtimg.com/site/TDesign.png">
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
<p align="center">
|
|||
|
|
<a href="https://github.com/Tencent/tdesign-miniprogram/blob/develop/LICENSE">
|
|||
|
|
<img src="https://img.shields.io/npm/l/tdesign-miniprogram.svg?sanitize=true" alt="License">
|
|||
|
|
</a>
|
|||
|
|
<a href="https://www.npmjs.com/package/tdesign-miniprogram">
|
|||
|
|
<img src="https://img.shields.io/npm/v/tdesign-miniprogram.svg?sanitize=true" alt="Version">
|
|||
|
|
</a>
|
|||
|
|
<a href="https://www.npmjs.com/package/tdesign-miniprogram">
|
|||
|
|
<img src="https://img.shields.io/npm/dw/tdesign-miniprogram" alt="Downloads">
|
|||
|
|
</a>
|
|||
|
|
</p>
|
|||
|
|
|
|||
|
|
[TDesign](https://github.com/Tencent/tdesign) 适配微信小程序的组件库。
|
|||
|
|
|
|||
|
|
## 预览
|
|||
|
|
|
|||
|
|
小程序组件示例小程序，请使用微信扫码预览 ↓
|
|||
|
|
<br/>
|
|||
|
|
|
|||
|
|
<img width="260" src="https://user-images.githubusercontent.com/7017290/146479952-b05298e8-f6ac-44a1-b73c-7abd8b9b3914.jpeg" />
|
|||
|
|
|
|||
|
|
## 安装
|
|||
|
|
|
|||
|
|
### 使用 NPM
|
|||
|
|
|
|||
|
|
小程序已经支持使用 NPM 安装第三方包。
|
|||
|
|
|
|||
|
|
具体使用方式，可以参考小程序官网文档： [《NPM 支持》](https://developers.weixin.qq.com/miniprogram/dev/devtools/npm.html?search-key=npm)
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm i tdesign-miniprogram -S --production
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
> 建议使用 NPM，不再推荐“源码拷贝的方式”
|
|||
|
|
|
|||
|
|
## 使用组件
|
|||
|
|
|
|||
|
|
以按钮组件为例，只需要在 `JSON` 文件中引入按钮对应的自定义组件即可
|
|||
|
|
|
|||
|
|
```json
|
|||
|
|
{
|
|||
|
|
"usingComponents": {
|
|||
|
|
"t-button": "tdesign-miniprogram/button/button"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 在开发者工具中预览
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# 安装项目依赖
|
|||
|
|
npm install
|
|||
|
|
|
|||
|
|
# 执行组件编译
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
打开[微信开发者工具](https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html)，把 `_example` 目录添加进去就可以预览示例了。
|
|||
|
|
|
|||
|
|
## 基础库版本
|
|||
|
|
|
|||
|
|
最低基础库版本`^2.6.5`
|
|||
|
|
|
|||
|
|
## 反馈&共建
|
|||
|
|
|
|||
|
|
目前TDesign 小程序组件库已在[ github ](https://github.com/Tencent/tdesign-miniprogram)上开源，欢迎大家反馈问题和参与共建：
|
|||
|
|
<img src="https://we-retail-static-1300977798.cos.ap-guangzhou.myqcloud.com/retail-mp/common/wechat-group.jpg" width = "230" height = "290" alt="模版小程序页面详情" align=center />
|
|||
|
|
|
|||
|
|
## 仓库
|
|||
|
|
|
|||
|
|
TDesign 是一个 `multi-repo`， TDesign 有如下代码仓库：
|
|||
|
|
|
|||
|
|
### 桌面端组件库
|
|||
|
|
|
|||
|
|
| 仓库 | 描述 | 状态 |
|
|||
|
|
| --------------------------------------------------------------- | -------------------- | -------- |
|
|||
|
|
| [tdesign-vue](https://github.com/Tencent/tdesign-vue) | Vue 2.x 技术栈 | `Beta` |
|
|||
|
|
| [tdesign-vue-next](https://github.com/Tencent/tdesign-vue-next) | Vue 3.x 技术栈 | `Alpha` |
|
|||
|
|
| [tdesign-react](https://github.com/Tencent/tdesign-react) | React 16.x 技术栈 | `Alpha` |
|
|||
|
|
| tdesign-angular | 基于 Angular 10 实现 | `待上线` |
|
|||
|
|
|
|||
|
|
### 移动端组件库
|
|||
|
|
|
|||
|
|
| 仓库 | 描述 | 状态 |
|
|||
|
|
| --------------------------------------------------------------------- | ----------------- | -------- |
|
|||
|
|
| [tdesign-miniprogram](https://github.com/Tencent/tdesign-miniprogram) | 微信小程序 | `Alpha` |
|
|||
|
|
| [tdesign-mobile-vue](https://github.com/Tencent/tdesign-mobile-vue) | Vue 3.x 技术栈 | `Alpha` |
|
|||
|
|
| tdesign-mobile-react | React 16.x 技术栈 | `待上线` |
|
|||
|
|
| tdesign-flutter | 1.17.0 | `待上线` |
|
|||
|
|
|
|||
|
|
### 基础通用仓库
|
|||
|
|
|
|||
|
|
| 仓库 | 描述 |
|
|||
|
|
| ----------------------------------------------------------- | -------------------- |
|
|||
|
|
| [tdesign](https://github.com/Tencent/tdesign) | TDesign 主仓库和文档 |
|
|||
|
|
| [tdesign-icons](https://github.com/Tencent/tdesign-icons) | TDesign 公共图标 |
|
|||
|
|
| [tdesign-common](https://github.com/Tencent/tdesign-common) | TDesign 公共样式 |
|
|||
|
|
|
|||
|
|
### 解决方案及周边
|
|||
|
|
|
|||
|
|
| 仓库 | 描述 |
|
|||
|
|
| --------------------------------------------------------------------------------------------------- | ------------------------------------------- |
|
|||
|
|
| [tdesign-starter-cli](https://github.com/Tencent/tdesign-starter-cli) | TDesign 解决方案的脚手架 |
|
|||
|
|
| [tdesign-vue-starter](https://github.com/Tencent/tdesign-vue-starter) | 基于 tdesign-vue 的解决方案 |
|
|||
|
|
| [tdesign-vue-next-starter](https://github.com/Tencent/tdesign-vue-next-starter) | 基于 tdesign-vue-next 的解决方案 |
|
|||
|
|
| [tdesign-react-starter](https://github.com/Tencent/tdesign-react-starter) | 基于 tdesign-react 的解决方案 |
|
|||
|
|
| [tdesign-miniprogram-starter-retail](https://github.com/Tencent/tdesign-miniprogram-starter-retail) | 基于 tdesign-miniprogram 的零售行业解决方案 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
## 开源协议
|
|||
|
|
|
|||
|
|
TDesign 遵循 [MIT 协议](https://github.com/Tencent/tdesign-miniprogram/LICENSE)。
|