DOO 移动端

基于 uni-app (Vue 3) 构建，22 个页面，5 个 Tab。

技术参数

项目 说明
框架 uni-app (Vue 3)
AppID __UNI__F3BE11F
版本 1.1.3 (build 502)
编译工具 HBuilderX 3.2.0+
样式 SCSS + uni.scss
状态管理 Vuex (2 模块: user + recommendation)
存储 uni.setStorageSync / uni.getStorageSync
网络 uni.request / uni.uploadFile
组件 10 个 (含 7 个功能模块组件)

Tab Bar (5 个 Tab)

DOO 移动端

Tab 页面路径 功能
首页 pages/tabbar/tabbar-1 轮播图 Banner + 图片瀑布流推荐，预加载 Tab 2/3
用户 pages/tabbar/tabbar-2 用户发现列表（头像/昵称/关注数/粉丝数），点击跳转主页
发布 pages/tabbar/tabbar-3 底部弹出菜单：发图片 / 发视频 / 写文章
消息 pages/tabbar/tabbar-4 消息列表（会话分组 + 未读数）
我 pages/tabbar/tabbar-5 个人中心：资料卡、内容统计（帖子/图片/收藏/文章）、设置入口

全部页面 (22 个)

认证模块

| 页面 | 路径 | 功能 | |——|——|——| | 登录 | pages/auth/login | 登录/注册双模式，已登录自动跳转，localStorage 存储 | | 修改密码 | pages/auth/change-password | 旧密码 + 新密码 + 确认，自定义导航栏 |

内容模块

| 页面 | 路径 | 功能 | |——|——|——| | 内容详情 | pages/content/card-detail | 通过 eventChannel 接收数据，大图浏览 | | 消息详情 | pages/content/message-detail | 1v1 聊天对话页面 | | 公告详情 | pages/content/announcement-detail | Markdown 公告展示 | | 文章详情 | pages/content/article-detail | 文章阅读页面 |

用户模块

| 页面 | 路径 | 功能 | |——|——|——| | 编辑资料 | pages/user/edit-profile | 头像/背景上传、昵称、性别、生日、地区、简介 | | 设置 | pages/user/settings | 修改密码入口、退出登录 | | 用户主页 | pages/user/user-profile | 用户资料卡 + 内容列表 | | 我的帖子 | pages/user/my-posts | 当前用户发布的内容列表 | | 我的图片 | pages/user/my-images | 当前用户上传的图片列表 | | 我的收藏 | pages/user/my-favorites | 收藏的图片列表 | | 我的文章 | pages/user/my-articles | 当前用户发布的文章列表 | | 我的问答 | pages/user/my-questions | 问答内容列表 |

信息模块

| 页面 | 路径 | 功能 | |——|——|——| | 关于我们 | pages/info/about-us | 应用介绍 | | 系统设置 | pages/info/system-settings | 缓存清理、检查更新 | | 隐私政策 | pages/info/privacy-policy | 法律文本 | | 用户协议 | pages/info/user-agreement | 法律文本 | | 使用文档 | pages/info/documentation | 帮助文档 | | 抖音热搜 | pages/hot/douyin-hot | 爬虫数据展示 |

自定义导航栏

以下页面使用 navigationStyle: custom： 全部 22 个页面中除 settings 外均使用自定义导航栏。

Vuex Store

user 模块

  • 用户登录状态管理
  • Token + 用户信息存储
  • 登录/登出/注册 actions

recommendation 模块

  • 推荐内容缓存
  • 推荐算法标识
  • A/B 测试 ID 追踪
  • 推荐点击上报

组件库 (10 个)

组件 路径 功能
image-lazy components/image-lazy 图片懒加载
skeleton components/skeleton 骨架屏占位
carousel components/modules/carousel 轮播图组件
form-validator components/modules/form-validator 表单验证
image-waterfall components/modules/image-waterfall 图片瀑布流布局
modal components/modules/modal 通用模态框
nav-bar components/modules/nav-bar 自定义导航栏
recommend-card components/modules/recommend-card 推荐内容卡片
user-card components/modules/user-card 用户卡片

API 地址配置

前端 API 地址硬编码在各 Vue 页面和组件中。部署前需批量替换：

开发：http://192.168.1.12/DOO/server/api/
生产：http://139.196.185.197:7070/doo/server/api/

涉及所有 pages/ 下 .vue 文件、components 中的组件、admin-web/script.js。

Tab Bar 样式

  • 背景：白色 (#ffffff)
  • 文字色：黑色 (#000000)
  • 选中色：黑色
  • 5 个 Tab 各有独立图标（常态/选中态 PNG）

编译部署

原生 App (iOS/Android)

  1. HBuilderX 打开项目根目录
  2. 配置 manifest.json（AppID、图标、启动图、权限）
  3. 「发行」→「原生 App 云打包」
  4. 配置签名证书
  5. 提交云端打包

已编译 APK：unpackage/cache/apk/__UNI__F3BE11F_cm.apk

H5 网页版

HBuilderX → 发行 → 网站-H5 手机版

输出到 unpackage/dist/build/h5/。

微信小程序

  1. manifest.json 配置微信小程序 AppID
  2. HBuilderX → 发行 → 小程序-微信
  3. 微信开发者工具打开 dist 目录上传

权限配置 (Android)

应用请求的 Android 权限包括：网络状态、WiFi 状态、相机、闪光灯、读取手机状态、写入设置、挂载文件系统等。

静态资源

static/
├── logo.png
├── logoo.png
├── 42FB82841F6A65D8BA8FCC4EEFCA43DD.png  # 启动图
├── css/
│   └── global.css
└── img/
    ├── tabbar/                   # Tab 图标 (10 个 PNG)
    │   ├── home.png / homeactive.png
    │   ├── guanzhu.png / guanzhuactive.png
    │   ├── add.png / addactive.png
    │   ├── news.png / newsactive.png
    │   └── me.png / meactive.png
    ├── release.png
    ├── video.png
    └── qa.png

FTP 自动部署

项目包含 4 个 PowerShell 脚本用于 FTP 自动上传：

  • auto-ftp-upload.ps1
  • ftp-upload-optimized.ps1
  • ftp-upload-english.ps1
  • simple-ftp-upload.ps1

配置存储在 ftp-config.json，缓存记录在 ftp-upload-cache.json。

📝 本文由AI生成