TDesign 微信小程序 UI 组件库使用教程

1、项目的目录结构及介绍

TDesign 微信小程序 UI 组件库的目录结构如下：

tdesign-miniprogram/
├── dist/
├── docs/
├── examples/
├── scripts/
├── src/
│   ├── components/
│   ├── pages/
│   ├── app.js
│   ├── app.json
│   ├── app.wxss
│   └── project.config.json
├── package.json
└── README.md

目录介绍

• dist/: 编译后的文件目录。
• docs/: 项目文档。
• examples/: 示例代码。
• scripts/: 构建脚本。
• src/: 源代码目录。
  • components/: 组件目录。
  • pages/: 页面目录。
  • app.js: 小程序的入口文件。
  • app.json: 小程序的全局配置文件。
  • app.wxss: 小程序的全局样式文件。
  • project.config.json: 小程序的项目配置文件。
• package.json: 项目的依赖管理文件。
• README.md: 项目说明文档。

2、项目的启动文件介绍

app.js

app.js 是小程序的入口文件，主要负责小程序的初始化工作。以下是 app.js 的基本结构：

App({
  onLaunch: function () {
    // 小程序启动时的初始化操作
  },
  globalData: {
    // 全局数据
  }
})

app.json

app.json 是小程序的全局配置文件，用于配置小程序的页面路径、窗口表现、网络超时时间等。以下是 app.json 的基本结构：

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
}

app.wxss

app.wxss 是小程序的全局样式文件，定义了小程序的全局样式。以下是 app.wxss 的基本结构：

page {
  background-color: #f6f6f6;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  box-sizing: border-box;
}

3、项目的配置文件介绍

project.config.json

project.config.json 是小程序的项目配置文件，用于配置小程序的开发工具设置、编译设置等。以下是 project.config.json 的基本结构：

{
  "miniprogramRoot": "src/",
  "projectname": "tdesign-miniprogram",
  "description": "A Wechat MiniProgram UI components lib for TDesign",
  "appid": "touristappid",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": true,
    "minified": true
  },
  "compileType": "miniprogram",
  "simulatorType": "wechat",
  "simulatorPluginLibVersion": {},
  "condition": {}
}

package.json

package.json 是项目的依赖管理文件，定义了项目的依赖包、脚本命令等。以下是 package.json 的基本结构：

{
  "name": "tdesign-miniprogram",
  "version": "1.0.0",
  "description": "A Wechat MiniProgram UI components lib for TDesign",
  "main": "app.js",
  "scripts": {
    "build": "npm run build"
  },
  "dependencies": {
    "