spa/frontend/DEVELOPMENT.md

开发指南

项目结构说明

frontend/
├── user-miniprogram/      # 用户端小程序
│   ├── pages/            # 页面文件
│   ├── components/       # 组件文件
│   ├── static/          # 静态资源
│   ├── utils/           # 工具函数
│   ├── manifest.json    # 应用配置
│   ├── pages.json       # 页面路由配置
│   └── App.vue          # 应用入口
├── technician-miniprogram/ # 技师端小程序
└── agent-miniprogram/     # 代理端小程序

开发环境配置

1. 安装HBuilderX

下载并安装HBuilderX开发工具

2. 导入项目

• 打开HBuilderX
• 文件 -> 导入 -> 从本地目录导入
• 选择对应的小程序目录

3. 配置小程序AppID

在各项目的manifest.json中配置对应的小程序AppID

API接口规范

请求格式

// 统一使用封装的api工具
this.$api.get('/api/endpoint', params)
this.$api.post('/api/endpoint', data)

响应格式

{
  "code": 0,
  "msg": "success", 
  "data": {}
}

用户类型标识

• 用户端：User-Type: user
• 技师端：User-Type: technician
• 代理端：User-Type: agent

页面开发规范

1. 页面结构

<template>
  <view class="container">
    <!-- 页面内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {
    // 页面加载
  },
  methods: {}
}
</script>

<style scoped>
/* 页面样式 */
</style>

2. 样式规范

• 使用scoped避免样式污染
• 遵循BEM命名规范
• 使用uni.scss变量

3. 组件开发

• 组件放在components目录
• 使用驼峰命名
• 提供完整的props和events

调试说明

1. 微信开发者工具

• 安装微信开发者工具
• 导入项目的unpackage/dist/dev/mp-weixin目录
• 配置AppID进行调试

2. 真机调试

• 使用HBuilderX的真机运行功能
• 或编译后在对应平台的开发工具中预览

发布流程

1. 编译打包

# 用户端
npm run build:user

# 技师端  
npm run build:tech

# 代理端
npm run build:agent

2. 上传发布

• 使用对应平台的开发工具上传代码
• 提交审核
• 发布上线

注意事项

1. 各端功能独立，避免代码混淆
2. 统一使用gva后端API接口
3. 遵循各平台的开发规范
4. 注意用户隐私和数据安全
5. 做好错误处理和用户体验优化