# Market Miniprogram Taro + React + TypeScript 微信小程序项目,对接 Django 后端,支持 AI 服务、AR 体验、硬件商品购买及分销功能。 ## 目录结构 - `src/pages`: 主包页面 (首页、商品、订单、AI服务、AR体验) - `src/subpackages`: 分包页面 (分销中心) - `src/api`: API 定义 - `src/utils`: 工具函数 - `src/assets`: 静态资源 ## 技术栈 - **框架**: Taro 3.6 (React) - **语言**: TypeScript - **样式**: SCSS - **UI**: Taro UI / Ant Design (Design Reference) - **后端**: Django REST Framework ## 快速开始 小程序id wxdf2ca73e6c0929f0 ### 1. 环境准备 确保已安装 Node.js (>=16) 和 npm。 ### 2. 安装依赖 ```bash npm install --legacy-peer-deps ``` ### 3. 配置环境 复制 `.env` 模板并配置后端地址: ```bash # .env TARO_APP_API_URL=http://localhost:8000/api ``` ### 4. 启动开发 ```bash # 微信小程序开发 npm run dev:weapp ``` 启动后打开 **微信开发者工具**,导入 `dist` 目录即可预览。 ## 功能列表 1. **商品交易**: 浏览 ESP32 硬件配置,下单购买,微信支付。 2. **AI 服务**: 浏览 AI 解决方案,提交定制需求。 3. **AR 体验**: 展示 AR 案例,模拟启动体验。 4. **分销中心**: 申请成为分销员,生成推广码,查看收益,申请提现。 ## 测试指南 ### 支付测试 - 确保后端 `WeChatPayConfig` 已配置有效的沙箱或正式参数。 - 在小程序中下单后,点击支付将调用 `wx.requestPayment`。 - 本地开发需确保手机与电脑在同一局域网,并将后端地址改为局域网 IP。 ### 分销测试 1. 进入 "我的" -> "分销中心"。 2. 点击 "立即申请" (后端自动通过或需审核)。 3. 进入分销中心,点击 "推广二维码" 获取小程序码。 4. 模拟下单:在其他账号下单时填写 `ref_code` (或通过带参二维码进入)。 5. 查看收益:订单支付后,分销中心自动更新余额。 ## 常见问题 **Q: 依赖安装失败?** A: 使用 `npm install --legacy-peer-deps` 忽略版本冲突。 **Q: 接口请求 404/Network Error?** A: 检查 `.env` 中的 `TARO_APP_API_URL` 是否正确,真机调试时请勿使用 `localhost`,应使用本机局域网 IP (如 `192.168.1.x`),并确保手机能访问该 IP。 ## 贡献指南 1. Fork 本仓库 2. 新建特性分支 `git checkout -b feature/AmazingFeature` 3. 提交修改 `git commit -m 'Add some AmazingFeature'` 4. 推送到分支 `git push origin feature/AmazingFeature` 5. 提交 Pull Request