uniapp-template

• 15 分钟阅读 • 微信小程序 · Vue · TypeScript
uniapp-template

一个基于 Vue 3 + TypeScript + Pinia 的 UniApp 跨平台开发模板项目，集成了完整的开发工具链和组件库。

项目特性

项目结构

uniapp-template/
├── components/                    # 公共组件和工具
│   ├── eslint-config/            # ESLint 配置包
│   └── swagger-api-templates/    # API 模板生成工具
├── packages/
│   └── uni-template/             # 主要的 UniApp 项目
│       ├── src/
│       │   ├── pages/            # 页面文件
│       │   │   ├── common/       # 公共页面
│       │   │   ├── tabbar/       # 底部导航页面
│       │   │   └── template/     # 模板页面
│       │   ├── components/       # 组件
│       │   │   ├── common/       # 公共组件
│       │   │   ├── help/         # 帮助组件
│       │   │   └── request/      # 请求相关组件
│       │   ├── layout/           # 布局组件
│       │   │   ├── navigation/   # 导航栏组件
│       │   │   └── pageContainer/# 页面容器组件
│       │   ├── store/            # Pinia 状态管理
│       │   ├── request/          # API 请求封装
│       │   ├── utils/            # 工具函数
│       │   ├── hooks/            # Vue 3 Hooks
│       │   ├── enums/            # 枚举定义
│       │   ├── types/            # 类型定义
│       │   ├── static/           # 静态资源
│       │   └── uni_modules/      # UniApp 模块
│       │       └── wot-design-uni/ # Wot Design Uni 组件库
│       ├── plugins/              # 自定义插件
│       ├── scripts/              # 构建脚本
│       └── dist/                 # 构建输出
├── package.json                  # 根包配置
├── pnpm-workspace.yaml          # pnpm 工作区配置
└── README.md                     # 项目说明文档

快速开始

环境要求

安装依赖

pnpm install

开发命令

# 进入项目目录
cd packages/uni-template

# 微信小程序开发
pnpm dev

# H5 开发
pnpm dev:h5

# App 开发
pnpm dev:app

# 其他平台
pnpm dev:mp-alipay    # 支付宝小程序
pnpm dev:mp-baidu     # 百度小程序
pnpm dev:mp-qq        # QQ 小程序
pnpm dev:mp-toutiao   # 字节跳动小程序
pnpm dev:mp-kuaishou  # 快手小程序
pnpm dev:mp-jd        # 京东小程序
pnpm dev:mp-lark      # 飞书小程序

构建命令

# 进入项目目录
cd packages/uni-template

# 微信小程序构建
pnpm build

# H5 构建
pnpm build:h5

# App 构建
pnpm build:app

API 生成

# 进入项目目录
cd packages/uni-template

# 根据apifox/swagger 文档导出接口json地址，修改项目配置文件：swaggerApi.config.js
projects: [{ name: '', url: 'http://127.0.0.1:4523/export/openapi/2?version=3.0' }]

# 根据 apifox 文档生成 API 接口
pnpm api

核心组件

布局组件

公共组件

UI 组件库

项目集成了 Wot Design Uni 组件库，包含：

样式文件组织

src/
├── assets/
│   └── index.scss          # 全局样式入口
├── components/
│   └── */index.scss        # 组件样式文件
├── pages/
│   └── */index.scss        # 页面样式文件
└── layout/
    └── */index.scss        # 布局样式文件

主题变量

使用 CSS 变量定义主题色彩和尺寸：

:root {
  --wot-color-theme: #517cf0;
  --wot-color-success: #34d19d;
  --wot-color-warning: #f0883a;
  --wot-color-danger: #fa4350;
}

开发工具

插件工具

项目包含两个自定义插件，用于自动化开发流程：

路由生成插件 (getRoute.mjs)

# 进入项目目录
cd packages/uni-template

# 手动生成路由文件
pnpm route

功能说明：

生成的文件：

页面监听插件 (watch-pages.mjs)

# 开发模式下自动运行（包含在 dev 命令中）
pnpm dev

功能说明：

工作流程：

  1. 启动时执行一次路由生成
  2. 持续监听 pages.json 文件
  3. 检测到变更时自动重新生成路由文件
  4. 控制台输出生成状态和结果

状态管理

Pinia Store

使用 Pinia 进行状态管理，store 文件放在 src/store/ 目录下：

// src/store/common/useGlobalStore.ts
export const useGlobalStore = defineStore('globalStore', () => {
  const userInfo = ref<MemberDto>()

  const getUserInfo = async () => {
    const { data, code } = await api.get['/api/member/v1/member/getUserInfo']()
    data && setUserInfo(data)
    return { data, code }
  }

  return { userInfo, getUserInfo }
})

主要Store：

组合式函数 (Hooks)

项目提供了多个实用的组合式函数：

状态管理类

表单和数据处理

页面和导航

工具类

API 请求

项目使用自定义封装的请求库，支持根据swagger文档生成ts、自动token管理和静默授权，以及统一的错误处理和响应拦截。

请求封装

使用自定义封装的请求库，配置文件在 src/request/ 目录下：

// 使用请求
const data = await api.get['/api/member/v1/activity/activity']()
const result = await api.post['/api/auth/login']({ username, password })

特性：

请求实例

// src/request/instance.ts
const instance = Request.create({ baseUrl: apiUrl })

// 请求拦截器 - 自动添加token
instance.requestInterceptors.use(async (config) => {
  let token = getAuthorization()
  if (!token && silentAuthorization) {
    const { data } = await getToken(silentAuthorizationUrl)
    token = data
    setAuthorization(token)
  }
  config.headers = { ...config.headers, Authorization: token }
  return config
})

// 响应拦截器 - 统一错误处理
instance.responseInterceptors.use((res) => {
  if ([403, 40003, 401].indexOf(res.data.code) !== -1) {
    // token过期处理
    removeAuthorization()
    loginUrl && uni.navigateTo({ url: loginUrl })
    throw new Error()
  }
  return res.data
})

工具函数

文件处理

数据处理

平台适配

支持平台

技术栈

开发指南

页面路由

页面路由配置在 src/pages.json 中，支持自动路由生成。

组件开发

公共组件放在 src/components/ 目录下，支持 TypeScript 类型定义：

<template>
  <view class="custom-component">
    <slot />
  </view>
</template>

<script setup lang="ts">
interface Props {
  title?: string
}

defineProps<Props>()
</script>

类型定义

项目包含完整的 TypeScript 类型定义：

配置说明

环境配置

API 配置

ESLint 配置

部署说明

小程序部署

  1. 构建项目：pnpm build
  2. 使用微信开发者工具打开 dist/build/mp-weixin 目录
  3. 上传代码到微信小程序后台

H5 部署

  1. 构建项目：pnpm build:h5
  2. 将 dist/build/h5 目录部署到 Web 服务器

App 部署

  1. 构建项目：pnpm build:app
  2. 使用 HBuilderX 打开项目
  3. 云打包或本地打包

常见问题

路由生成失败

检查 src/pages.json 文件格式是否正确，确保 JSON 语法无误。

组件库样式问题

确保正确引入了 Wot Design Uni 的样式文件，检查 src/main.ts 中的导入。

请求失败

检查 src/config.ts 中的API地址配置，确保网络环境正常。

贡献指南

  1. Fork 本仓库
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开 Pull Request

更新日志

v3.0.0

许可证

ISC

联系方式

如有问题或建议，请通过以下方式联系：

文章标签: 微信小程序, Vue, TypeScript

上一篇 : 已经是第一篇文章了~
下一篇 : 👉👉👉爬蓝湖原型目录结构
阅读进度 0%