[微盟前端 Titian UI 组件库](http://titian.design.weimob.com/) 是由微盟官方设计团队针对移动端开发而设计的一套符合微盟标准视觉体验的基础风格库，包括按钮、单元格、弹窗、轻提示、导航、图标和其他元素，帮助开发者提升效率，改善开发体验，让用户的使用感知更加统一。本文介绍如何在定制小程序应用中如何快速引入与使用微盟 Titian UI 组件。

## 前置条件

- 已完成本地环境配置。具体请参见 [配置开发环境](http://doc.weimobcloud.com/word?tag=2721&menuId=53&childMenuId=58&isold=1)。
- 已成功创建小程序应用。具体请参见 [新建小程序应用](http://doc.weimobcloud.com/word?tag=3044&menuId=53&childMenuId=58&isold=1)。
- 已从 Git 仓库拉取应用代码到本地。具体请参见 [拉取初始化项目](http://doc.weimobcloud.com/word?tag=2722&menuId=53&childMenuId=58&isold=1)。

## 引用组件库

首次接入与使用 Titian UI 组件库，您需要引入组件库的补丁包。操作步骤如下：

1. 点击下载 [xapp-patch-package.zip](https://cdn.weimobcloud.com/saas/@assets/cloud-fe-develop-patch/@1.3.0/xapp-patch-package.zip) 补丁包。在本地解压后，您可以看到如下文件结构：

	```
	└─ xapp-patch-package
		├─ src
		│   └─ titian-mp
		│         └─ RAW
		│               ├─ action-sheet
		│               ├─ back-top
		│               ├─ badge
		│               ├─ behaviors
		│               ├─ button
		│               ├─ calendar
		│               ├─ callout-map
		│               ├─ cascade
	        │               ├─ ···
		│               ├─ tree-select
	        │               ├─ uploader
		│               └─ index.js
  	        └─ webpack-config
		       └─ webpack.config.js
	```

2. 将补丁包 `src` 目录下的 `titian-mp` 文件夹全部复制到小程序应用的 `weimobcloud-extention-xapp\src` 目录下，如下所示：

    ![image.png](https://image-c-dev.weimobwmc.com/qa-Omce/ef922002c48640d59c6238b875d619ff.png)

3. 将补丁包 `webpack-config` 目录下的 `webpack.config.js` 文件，替换您本地小程序应用的 `weimobcloud-extention-xapp\webpack-config` 目录下的 `webpack.config.js` 文件，引用 Titian 组件库。

## 引入组件
通过分包异步化方式，引入您需要使用的 Titian 组件。以使用 Titian 组件库中的 button 组件为例，引入方法如下：

```json
//subPackageA/pages/index.json
{
  usingComponents": {
    "ti-button": "../../titian-mp/RAW/button/index"
  },
  componentPlaceholder": {
    "ti-button": "view"
  }
}
```

> **说明**：关于分包异步化的详细说明，请参见 [微信分包异步化官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/subpackages/async.html)。

## 使用组件
参考 [Titian 组件文档](https://titian.design.weimob.com/docs/mini-program/components/global/button/)，使用相应的 Titian 组件。以 button 组件为例，按钮类型的使用方法如下：
```
<ti-button type="primary">默认</ti-button>
<ti-button type="warning">警告</ti-button>
<ti-button type="success">成功</ti-button>
<ti-button type="error">错误</ti-button>
<ti-button type="info">信息</ti-button>
```

文档中心

开发者角色

快速开始

工具与帮助

能力中心

常用API

能力场景

解决方案

使用 Titian 组件

文章是否对你有帮助？