PIG AI APP 使用
PIGX AI App 是基于 uni-app 框架开发的 PIG AI 移动端应用,支持微信小程序平台,集成了完整的 AI 能力与企业级功能,适用于快速构建高性能、跨平台的智能应用。
技术栈概览
核心依赖
| 类别 | 技术/库 | 版本 |
|---|
| 跨端框架 | uni-app | 3.0.0-4060620250520001 |
| 前端框架 | Vue 3(Composition API) | ~3.4.38 |
| 编程语言 | TypeScript | ~5.5.4 |
| 构建工具 | Vite | ^5.2.8 |
| UI 组件库 | Wot Design Uni | ^1.13.0 |
| 原子化 CSS | UnoCSS | ^0.62.3 |
| 状态管理 | Pinia | ^2.3.1 |
| 路由系统 | uni-mini-router | ^0.1.6 |
| 布局系统 | @uni-helper/uni-layouts | ^0.1.11 |
| 请求库 | Alova | ^3.3.4 |
环境要求
请确保本地开发环境满足以下最低要求:
| 工具 | 版本要求 |
|---|
| Node.js | ≥ 22 |
| pnpm | 9.9.0 |
| 微信开发者工具 | 最新稳定版(建议保持更新) |
💡包管理器推荐
推荐使用 pnpm 作为包管理器,以获得更快的安装速度和更优的磁盘空间利用。
快速开始
1. 克隆项目代码
git clone https://git.pig4cloud.com/pig/pigx-ai-app.git
cd pigx-ai-app
2. 安装依赖并启动开发模式
# 安装依赖(使用 pnpm)
pnpm install
# 启动微信小程序开发模式
pnpm dev:mp-weixin
构建完成后,输出目录为 dist/dev/mp-weixin。
3. 导入微信开发者工具
- 打开 微信开发者工具
- 点击「+」新建项目,选择目录:
dist/dev/mp-weixin
- 填写 AppID(如无正式账号,可使用测试号)
- 点击"确定",即可预览和调试小程序
⚠配置注意事项
首次使用需在 PIGX UI 中配置正确的 AppID 和 AppSecret。
项目结构说明
pigx-ai-app/
├── src/
│ ├── api/ # 自动生成的 API 接口定义
│ ├── components/ # 全局通用组件
│ ├── composables/ # 可复用的组合式函数(Vue 3 Composition API)
│ ├── constants/ # 全局常量(如枚举、配置项)
│ ├── layouts/ # 页面布局模板
│ │ ├── default.vue # 默认布局(无底部导航)
│ │ └── tabbar.vue # 带底部 TabBar 的布局
│ ├── pages/ # 所有页面组件(按路由自动映射)
│ ├── router/ # 路由相关逻辑(基于 uni-mini-router)
│ ├── static/ # 静态资源(图片、字体等)
│ ├── store/ # Pinia 状态管理模块
│ ├── styles/ # 全局样式与主题变量
│ ├── subEcharts/ # ECharts 图表分包(按需加载)
│ ├── types/ # TypeScript 类型定义文件
│ ├── utils/ # 工具函数集合(日期处理、校验等)
│ ├── App.vue # 应用根组件
│ └── main.ts # 应用入口文件
├── .env # 基础环境变量
├── .env.development # 开发环境专用变量
├── .env.production # 生产环境专用变量
├── alova.config.ts # Alova 请求库全局配置
├── manifest.config.ts # uni-app 小程序 manifest 配置(含 appId 等)
├── pages.config.ts # 页面路由注册配置
├── theme.json # 主题色与设计规范配置
├── uno.config.ts # UnoCSS 原子化样式配置
├── vite.config.ts # Vite 构建配置
├── package.json # 项目元信息与脚本命令
└── README.md # 项目说明文档