# 在微信小程序里使用

> 目前 `@icestack/preset-weapp` 必须要配合 [`weapp-tailwindcss`](https://weapp-tw.icebreaker.top/) 一起使用，在使用前请确保 [`weapp-tailwindcss`](https://weapp-tw.icebreaker.top/) 安装配置成功。

## 安装

`@icestack/preset-weapp` 内部实现了一套预设来兼容微信小程序

你可以使用 `@icestack/preset-weapp` 中导出的 `miniprogramPreset` 来构建出小程序版本的默认 `ui` 库

首先我们安装 `@icestack/preset-weapp`

```sh
# yarn / pnpm
npm i -D @icestack/preset-weapp
```

## 注册

然后在 `icestack.config.cjs` 中注册

```js filename="icestack.config.cjs"
const miniprogramPreset = require('@icestack/preset-weapp')
/**
 * @type {import('@icestack/ui').Config}
 */
const config = {
  // 可以根据环境变量，把 h5 和 小程序的 outdir 设置为不同的目录
  outdir: './my-ui',
  presets: [miniprogramPreset()]
}

module.exports = config
```

## 构建

然后你执行命令:

```bash
npx icestack build
```

构建出的就是适配小程序的库了。

## 演示小程序

![icestack](/mp.jpg)
