Uniapp Examples

基于 uni-app + Vue 3 + TypeScript 的跨平台小程序项目，默认编译目标为微信小程序，同时支持多端输出。

---

技术栈

技术	版本	说明
uni-app	3.0.0	跨平台框架
Vue	^3.4.21	前端框架
TypeScript	^4.9.4	类型系统
Vite	5.2.8	构建工具
Tailwind CSS	^3.4.19	原子化 CSS
weapp-tailwindcss	^4.10.3	小程序 Tailwind 适配
vue-i18n	^9.1.9	国际化

---

目录结构

your-app/
├── src/                        # 源代码
│   ├── pages/                  # 页面组件
│   │   └── index/
│   │       └── index.vue       # 首页
│   ├── static/                 # 静态资源
│   ├── styles/
│   │   └── app.css             # 全局样式（Tailwind 入口）
│   ├── App.vue                 # 应用根组件
│   ├── main.ts                 # 应用入口
│   ├── manifest.json           # uni-app 应用配置
│   ├── pages.json              # 页面路由配置
│   ├── env.d.ts                # 环境类型声明
│   ├── shime-uni.d.ts          # uni-app 类型补充
│   └── uni.scss                # uni-app 内置样式变量
├── dist/                       # 编译输出（自动生成）
├── .vscode/                    # VSCode 编辑器配置
├── index.html                  # HTML 入口
├── vite.config.ts              # Vite 构建配置
├── tailwind.config.js          # Tailwind CSS 配置
├── postcss.config.js           # PostCSS 配置
├── tsconfig.json               # TypeScript 配置
├── .prettierrc                 # 代码格式化配置
└── package.json                # 项目依赖与脚本

---

快速开始

安装依赖

pnpm install

开发模式（微信小程序）

pnpm dev

编译产物输出至 dist/dev/mp-weixin/，使用微信开发者工具导入该目录预览。

生产构建

pnpm build

其他平台

# 支付宝小程序
pnpm dev:mp-alipay

# H5
pnpm dev:h5

# App
pnpm dev:app

代码格式化

pnpm format

TypeScript 类型检查

pnpm type-check

---

架构说明

入口流程

index.html
  └── src/main.ts          # 创建 SSR App 实例
        └── src/App.vue    # 根组件，监听应用生命周期
              └── pages/   # 各页面组件

样式方案

全局样式通过 src/styles/app.css 引入 Tailwind CSS 三层指令：

@tailwind base;
@tailwind components;
@tailwind utilities;

微信小程序环境下由 weapp-tailwindcss 插件将 Tailwind 类名转换为小程序兼容格式。tailwind.config.js 中关闭了 preflight，避免与小程序默认样式冲突。

路径别名

@ 映射至 ./src，在 vite.config.ts 和 tsconfig.json 中均已配置。

import SomeComponent from '@/components/SomeComponent.vue'

页面路由

页面路由在 src/pages.json 中声明，新增页面需在此文件注册：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "custom"
      }
    }
  ]
}

多端支持

uni-app 支持以下平台编译：

• 微信小程序 (mp-weixin)
• 支付宝小程序 (mp-alipay)
• 百度小程序 (mp-baidu)
• 抖音小程序 (mp-toutiao)
• QQ 小程序 (mp-qq)
• 快手小程序 (mp-kuaishou)
• 飞书小程序 (mp-lark)
• 京东小程序 (mp-jd)
• 小红书小程序 (mp-xhs)
• 鸿蒙小程序 (mp-harmony)
• H5 (h5)
• App (app-plus)
• 快应用 (quickapp-webview)

---

代码规范

• 格式化工具：Prettier，配置见 .prettierrc
• 缩进：2 空格，无分号，单引号，行宽 120
• TypeScript 严格类型检查，禁止使用 any
• 组件使用 <script setup lang="ts"> 语法