---
title: Taro 多端开发示例
emoji: 🚀
colorFrom: blue
colorTo: green
sdk: docker
pinned: false
short_description: Taro 多端开发示例
---

# Taro 多端开发示例

这是一个基于 Taro 4 的多端开发项目，支持微信小程序、H5 等多端运行。

## 功能特性

- **多端支持**: 一套代码同时生成小程序和 H5 应用。
- **H5 适配**: H5 页面限制最大宽度并居中显示，适配桌面端浏览器。
- **中文支持**: 全中文注释和文档。
- **Docker 部署**: 提供 Dockerfile 用于容器化部署。

## 快速开始

### 安装依赖

```bash
npm install
# 或者
pnpm install
```

### 开发环境运行

```bash
# 微信小程序
npm run dev:weapp

# H5
npm run dev:h5
```

### 构建生产版本

```bash
# 微信小程序
npm run build:weapp

# H5
npm run build:h5
```

## 目录结构

```
├── config                  # 编译配置
├── src                     # 源码目录
│   ├── pages               # 页面文件
│   ├── app.config.ts       # 全局配置
│   ├── app.scss            # 全局样式
│   ├── app.tsx             # 入口组件
│   └── index.html          # H5 入口模板
├── Dockerfile              # Docker 构建文件
└── package.json            # 项目依赖
```

## 注意事项

- H5 端使用了条件编译样式，确保在大屏设备上居中显示。
- 小程序端请使用微信开发者工具打开 `dist` 目录预览。