logo
0
2
WeChat Login

YinJi | 映记 📷

项目说明

本项目是"软件工程"课程的大作业(映记项目)的前端代码仓库,我们正在开发一个具有展示功能、类似朋友圈的多媒体展示小程序📱!

我们使用TAPD平台进行需求管理和迭代,如果你需要查看我们的全部需求

项目成员

  • 何典豪: 负责小程序端-首页相关的(Discover, Search...) 🌻
  • 黄启烨[new🎉]: 负责管理员端
  • 熊啸天: 负责小程序端-登录、注册及消息模块 ☁️
  • 周彦彤: 负责小程序端-我的模块 👧🏻

迭代流程

  • Week N: 设计周
    • 根据PM在TAPD分配的用户故事,使用墨刀绘制UI原型,并呈现业务/交互逻辑
    • 根据交互逻辑,构想并对接好对应API
  • Week N+1: 实现周
    • 根据原型,实现前端页面和交互逻辑

开发环境

  • IDE💻: HBuilderX
  • 编译🛠️: 微信开发者工具(稳定版)
  • 框架🌐: uni-app, vue3
  • UI库🎨: uView-plus配置教程

项目结构

分包结构

整个项目采用分包加载的方式进行组织,这样用户启动小程序时,只会加载主包;进入分包页面时,才会加载对应分包。分包结构如下:

  • 主包: pages
    • home: 首页
    • login: "登录"页
    • message: "消息"页
    • mine: "我的"页
  • 分包1: auth-flow(登录认证)
    • wechat-auth: 微信授权页
    • forget-password: 忘记密码页
    • reset-password: 重置密码页
    • bind-email: 绑定邮箱页
  • 分包2: discover(发现模块及其子页)
    • search: 搜索页
    • search-result: 搜索结果页
  • 分包3: chat(消息模块及其子页)
    • detail: 聊天详情页
  • 分包4: mine-config(我的&设置模块及其子页)
    • edit-profile: 编辑资料页
    • setting: 设置页
    • account-safe: 账号与安全页
    • has-password: 修改密码页

目录结构

事实上,关注⭐️标注的文件夹即可

/项目根目录
├── auth-flow/                  # ⭐️【分包1】:登录认证流程
│   ├── bind-email/             # 绑定邮箱页
│   ├── forget-password/        # 忘记密码页
│   ├── reset-password/         # 重置密码页
│   └── wechat-auth/            # 微信授权页
│
├── chat/                       # ⭐️【分包3】:消息模块子页
│   └── detail/                 # 聊天详情页
│
├── common/                     # 公共工具与配置
│   └── config.js               # 全局配置文件
│
├── components/                 # ⭐️ 全局公共组件
│   └── my-tabbar/              # 自定义 TabBar 组件
│
├── discover/                   # ⭐️【分包2】:发现模块子页
│   ├── search/                 # 搜索页
│
├── mine-config/                # ⭐️【分包4】:我的/设置子页
│   ├── account-safe/           # 账号与安全页
│   ├── edit-profile/           # 编辑资料页
│   ├── has-password/           # 修改密码页
│   └── setting/                # 设置页
│
├── pages/                      # ⭐️【主包】
│   ├── home/                   # 首页
│   ├── login/                  # 登录页
│   ├── message/                # 消息页
│   └── mine/                   # 我的页
│
├── static/                     # 静态资源(图片、字体、公共样式等)
│   ├── customicons.css         # 自定义图标样式
│   ├── customicons.ttf         # 自定义图标字体
│   └── ... (图片资源)
│
├── uni_modules/                # 插件与组件库
│   ├── uview-plus/             # uView Plus UI 库
│   └── ... (uni-ui 官方组件)
│
├── App.vue                     # 应用配置,用来配置App全局样式以及监听
├── main.js                     # Vue初始化入口文件
├── manifest.json               # 配置应用名称、appid、logo、版本等打包信息
├── pages.json                  # ⭐️ 配置页面路由、导航条、选项卡等页面类信息(修改启动页)
├── uni.scss                    #/项目根目录

组件结构

components/
├── common/                # [通用组件] 全局通用,如 my-tabbar(底部导航栏)
│   └── my-tabbar/
│
├── business/              # [业务相关组件]
│   ├── feed/              # [帖子模块] 包含帖子流和帖子项
│   │   ├── feed-stream.vue
│   │   └── feed-item.vue
│   │
│   ├── user/              # [用户模块] (Future)
│   │   └── user-card.vue
│   │
│   └── comment/           # [评论模块] (Future)
│       └── comment-list.vue
│
└── uview-plus/            # 第三方库 (不用)

Git协作规范

.gitignore说明

# 忽略uni-app编译生成的unpackage目录(不然会导致大量编译产生的文件冲突,很混乱🥴)
unpackage/
如果你已经在Stage区,即`git add`了`unpackage/`的内容,如何撤销?
git rm -r --cached unpackage/

PS: 该命令会将unpackage/目录从Git的版本控制中移除,但不会删除你本地的文件

开发规范

分支(Branch)

开发新功能/修复bug时,请务必新建分支(先在本地新建,再push到远程即可同步),分支命名格式统一为: feat/... or fix/...

Sync Frequently原则: 请经常pull远程main分支的最新代码,再切换会开发分支,并merge最新的main分支代码,以尽早发现冲突。具体流程如下:

# 切换会main分支,并pull最新代码
git checkout main 
git pull origin main

# 切换回你的开发分支,并merge最新的main分支代码
git checkout feat/...  # or fix/...

# 合并main分支最新代码到当前分支,并尽早处理冲突
git merge main

提交(Commit)

无论是在自己的开发分支,还是在主分支上提交时,都建议遵守以下规范:

  • 采用<type>(<scope>): <subject>的格式: 如feat(home): 增加调用获取推荐标签API功能
    • <type>(must-have): 提交类型
      • feat: 新功能🚀,表示新主题、新页面或新组件;新增调用...API功能
      • style: 对页面样式的调整和修改
      • fix: 修复bug
      • docs: 文档更新(如修改README.md)
      • refactor: 重构代码(不是新增功能,也不是修改 bug 的代码变动)
      • test: 添加测试
    • <scope>(optional): 表示此次commit的修改范围(常在提交到main分支时使用,如feat(home)表示新增首页相关的功能)
    • <subject>(must-have): 简短描述此次提交的内容,使用祈使句

代码(Code)

  1. 凡是uView-plus有的组件,都优先使用 → 如<u-button>✅,而不是<button>
  2. 优先使用rpx(Responsive Pixel)作为单位✅,以适配不同手机屏幕;尽量不用px单位
  3. 文件夹📂、文件📃、组件命名统一使用小写字母,用“-”分隔,不使用下划线 → 如search-result.vue

提交前检查(Pre-commit & Merge Check)

  • 将开发分支合并到main分支后,记得先修改pages.json中的启动页,再git add pages.json,最后再提交

  1. 日常开发: 在你个人的开发分支上,每完成一个部分,就可以提交一次
git add . # 添加所有修改的文件到暂存区
git commit -m "feat(scope): (subject)" # 提交,scope可选
git push origin feat/... # 推送到对应的远程开发分支
  1. 完成feat/...分支的开发后,准备合并到main分支: (采用Squash Merge)
# 首先确保本地main分支是最新的
git checkout main
git pull origin main # 拉取远程main分支的最新代码,若有冲突,此处应先解决

# 在主分支处: 将开发分支合并到主分支
git merge --squash feat/... # 使用squash合并,将开发分支新的所有提交压缩为一次提交说明

git status # (optional)查看状态以验证

# 若有冲突,请手动合并解决冲突(或修改启动页后),再`git add <file>`
git commit -m "feat(scope): (subject)" # 描述squash合并的所有提交的内容

# 推送到远程main分支
git push origin main

FAQ❓

如何配置AppID,以实现在HBuilderX中直接编译并运行小程序?
  • 修改manifest.json文件中的微信小程序配置,将AppID改为你自己的AppID(AppID需要自行注册)
如何在APIFox查看对应接口的URL?
  1. APIFox中,选中对应接口
  2. 右上角“环境”切换为“正式环境”
  3. 左下角选择“调试模式”
  4. 接口顶部出现URL栏
调试时,如何修改启动页为当前正在调试页面,以更方便?
  1. 打开pages.json文件
  2. 将当前调试页面放到"pages"数组的第一个☝🏻(PS: 在提交时,记得修改回来)

About

No description, topics, or website provided.
Language
Vue58.9%
JavaScript26.4%
TypeScript12.7%
CSS0.9%
Others1.1%