Book-Hi 项目开发指南 (Project Instructions)
Tech Stack
- Framework: uni-app
- UI Library: uView UI v1
- Language: JavaScript (ES6+), Vue 2, SCSS
- State Management: Vuex
- Platform: 微信小程序 (WeChat Mini Program), 支付宝小程序 (Alipay Mini Program)
Code Style
- File Naming:
- 组件 (Components):
kebab-case.vue (例如: address-card.vue) 或 PascalCase.vue (例如: BookItem.vue)
- 页面 (Pages):
kebab-case.vue
- JS 文件:
camelCase.js
- CSS:
- 必须使用
<style lang="scss" scoped>
- 单位统一使用
rpx 以保证响应式布局
- 优先使用
theme.scss 中的全局变量
- UI Component Usage:
- uView 组件前缀为
u- (例如 <u-button>),已通过 easycom 全局注册,无需手动引入。
Project Structure
pages/ → 主包页面(仅包含底部的 Tabbar 页面:首页、卖书、购物车、我的)
pages-sell/ → 买书/商城子包(商品详情、搜索、热门推荐等)
pages-home/ → 卖书子包(扫码卖书、确认订单、协议等)
pages-car/ → 购物车与订单子包(购物车列表、结算台、退款售后等)
pages-mine/ → 个人中心子包(收货地址、钱包、合伙人、设置等)
api/ → 接口请求定义 (config.js 包含请求拦截器)
components/ → 全局公共组件
store/ → Vuex 状态管理
static/ → 全局静态资源(子包静态资源在各自子包内的 static/ 目录下)
API Conventions
- 接口封装:
- 所有模块化接口位于
api/modules/ 下(如 mall.js, user.js)
- 命名规范: 接口方法统一以
Ajax 结尾(例如 getGoodsListAjax)
- 挂载方式: 通过
vm.$u.api 全局挂载
- 接口调用:
- 标准方式:
this.$u.api.methodName(params).then(...)
- 直接调用:
uni.$u.http.post('/path', params).then(...)
- 拦截与错误处理:
- 全局拦截器位于
api/config.js
- 401 状态码会自动触发
silentLogin (静默登录)
- 其他非 200 错误码会自动
showToast 提示
Build & Run
- 微信开发版:
npm run dev
- 微信正式版:
npm run prod
- 环境配置: 通过
.env.js, .env.dev.js, .env.prod.js 区分环境。
Conventions
- 代码注释: 所有复杂的业务逻辑和代码注释必须使用简体中文。
- 页面路由:
- Tabbar 页面跳转使用
uni.switchTab
- 子包页面跳转使用
uni.navigateTo,并且 必须使用绝对路径 (例如: /pages-sell/pages/detail)。
- 重构原则: 优先使用 uView 组件替代原生 HTML/Vue 标签,以保持项目整体一致性。