PICFLOW 移动端

PICFLOW 移动端 (uni-app)

基于 uni-app 框架构建的跨平台移动客户端，使用 Vue 3。

平台支持

平台	状态
iOS	支持
Android	支持
H5 (移动网页)	支持
微信小程序	支持
桌面端 (Electron)	支持

目录结构

uni-app/
├── App.vue                # 根组件
├── main.js                # 入口文件
├── pages.json             # 9 个页面路由配置
├── manifest.json          # 构建配置
├── uni.scss               # SCSS 变量
│
├── utils/
│   ├── config.js          # API 基础地址配置
│   ├── auth.js            # Token 存储管理
│   └── api.js             # API 客户端
│
├── components/
│   ├── ImageCard.vue      # 图片卡片（瀑布流）
│   ├── NavBar.vue         # 自适应导航栏
│   ├── EmptyState.vue     # 空状态占位
│   └── LoadingMore.vue    # 加载更多
│
└── pages/
    ├── index.vue          # 首页（瀑布流）
    ├── detail.vue         # 图片详情
    ├── upload.vue         # 上传页面
    ├── login.vue          # 登录
    ├── register.vue       # 注册
    ├── profile.vue        # 个人中心
    ├── likes.vue          # 收藏列表
    ├── history.vue        # 浏览历史
    └── version.vue        # 版本信息

---

开发指南

环境要求

# 安装 HBuilderX
# 下载地址：https://www.dcloud.io/hbuilderx.html

# 或使用 CLI
npm install -g @dcloudio/uni-cli

配置 API 地址

编辑 uni-app/utils/config.js：

export default {
  // 开发环境
  baseUrl: 'http://localhost/api/',
  // 生产环境
  // baseUrl: 'https://your-domain.com/api/',
};

运行调试

# H5 开发
npm run dev:h5

# 微信小程序
npm run dev:mp-weixin

# 打包
npm run build:h5
npm run build:mp-weixin

使用 HBuilderX

1. 打开 HBuilderX
2. 文件 → 导入 → 从本地目录导入
3. 选择 uni-app/ 目录
4. 运行 → 运行到浏览器 / 运行到手机

---

API 客户端

utils/api.js 封装了所有 API 调用：

特性：

• 自动注入 Bearer Token
• 401 自动拦截并跳转登录
• 统一错误处理
• 支持 GET/POST/multipart

使用示例：

import api from '@/utils/api.js';

// 获取图片列表
const res = await api.get('/images.php', { page: 1 });

// 点赞
await api.post('/like.php', { image_id: 1 });

// 上传图片
await api.upload('/upload.php', formData);

---

UI 组件

ImageCard — 瀑布流卡片

自适应高度的图片卡片，支持：

• 图片懒加载
• 骨架屏加载态
• 错误降级图
• 点赞状态显示

NavBar — 自适应导航栏

• 自动适配状态栏高度
• 支持自定义左右按钮
• 透明/实色双模式

EmptyState — 空状态

列表为空时的友好提示。

LoadingMore — 加载更多

滚动加载指示器，支持”加载中”/”没有更多了”/”点击重试”三种状态。

---

打包发布

# Android
npm run build:android

# iOS (需要 macOS + Xcode)
npm run build:ios

# 微信小程序
npm run build:mp-weixin

# H5
npm run build:h5

发布后通过 /admin/versions.php 配置版本信息，移动端会自动检测更新。