# 小程序快速配置指南 ⚡

> 5分钟内完成配置，快速开始开发！

## 🎯 配置前准备

- ✅ 已安装微信开发者工具
- ✅ 已有小程序AppID（或使用测试AppID）
- ✅ 后端API服务器已启动

## 📝 必须配置的3个地方

### 1️⃣ 配置小程序AppID

**文件**: `project.config.json`

\`\`\`json
{
  "appid": "你的小程序AppID",  // ⬅️ 改这里
  "projectname": "soul-party-book"
}
\`\`\`

> 💡 没有AppID？使用测试号：`wxd7e8c8a8e8c8a8e8`

---

### 2️⃣ 配置API服务器地址

**文件**: `app.js`

\`\`\`javascript
globalData: {
  apiBase: 'http://localhost:3000/api',  // ⬅️ 改这里
  // 本地开发: http://localhost:3000/api
  // 线上环境: https://your-domain.com/api
}
\`\`\`

---

### 3️⃣ 配置服务器域名（线上部署时）

登录[小程序后台](https://mp.weixin.qq.com/)：

开发管理 → 开发设置 → 服务器域名

\`\`\`
request合法域名:
https://your-domain.com

uploadFile合法域名:
https://your-domain.com

downloadFile合法域名:
https://your-domain.com
\`\`\`

---

## 🚀 启动步骤

### 第一步：启动后端服务器

在项目根目录运行：

\`\`\`bash
# Mac/Linux
chmod +x start-miniprogram.sh
./start-miniprogram.sh

# Windows
npm run dev
# 或
pnpm dev
\`\`\`

看到以下信息表示成功：

\`\`\`
✓ Ready in 2.3s
○ Local:    http://localhost:3000
\`\`\`

---

### 第二步：打开微信开发者工具

1. 点击"导入项目"
2. 选择 `miniprogram` 文件夹
3. 填入AppID（或选择测试号）
4. 点击"导入"

---

### 第三步：点击编译

点击工具栏的"编译"按钮，等待编译完成。

---

### 第四步：开始开发！🎉

现在你可以：

- 👀 在模拟器中查看效果
- 📱 扫码在真机预览
- 🔧 修改代码实时刷新
- 📊 查看Network请求

---

## 🧪 功能测试清单

### ✅ 首页测试

- [ ] 书籍封面正常显示
- [ ] 最新章节列表加载
- [ ] 点击章节可跳转阅读
- [ ] 购买按钮有响应

### ✅ 匹配书友测试

- [ ] 星空背景动画流畅
- [ ] 点击"开始匹配"有动画
- [ ] 3-6秒后匹配成功
- [ ] 显示匹配用户信息

### ✅ 我的页面测试

- [ ] 点击头像可登录
- [ ] 分销中心数据显示
- [ ] 生成推广海报功能
- [ ] 复制邀请码功能

### ✅ 阅读页测试

- [ ] 章节内容正常渲染
- [ ] 书签功能正常
- [ ] 目录侧滑打开
- [ ] 分享功能正常

---

## 🔧 常见问题

### Q1: 编译报错 "Cannot find module"

**解决**：检查后端服务器是否启动

\`\`\`bash
# 重新启动后端
pnpm dev
\`\`\`

---

### Q2: 页面空白，没有数据

**解决**：检查API地址配置

1. 打开 `app.js`
2. 确认 `apiBase` 地址正确
3. 在浏览器访问 `http://localhost:3000/api` 测试

---

### Q3: 图片不显示

**解决**：图片路径问题

临时方案：使用在线图片URL

\`\`\`javascript
// 将本地路径
src="/assets/images/book-cover.png"

// 改为在线URL
src="https://picsum.photos/400/560"
\`\`\`

---

### Q4: 支付测试失败

**解决**：本地开发暂时无法测试真实支付

- 使用Mock数据模拟支付成功
- 真实支付需要：
  1. 配置微信支付商户号
  2. 部署到HTTPS域名
  3. 在小程序后台配置支付权限

---

### Q5: 模拟器和真机效果不一致

**解决**：以真机为准

\`\`\`bash
# 真机调试步骤：
1. 点击工具栏"预览"
2. 手机微信扫码
3. 在手机上调试
\`\`\`

---

## 📞 获取帮助

### 技术支持

- **文档**: 查看 `开发文档/` 目录

### 官方文档

- [微信小程序官方文档](https://developers.weixin.qq.com/miniprogram/dev/framework/)
- [微信支付文档](https://pay.weixin.qq.com/wiki/doc/api/index.html)

---

## 🎨 自定义配置（可选）

### 修改主题色

**文件**: `app.wxss`

\`\`\`css
.brand-color {
  color: #FF4D4F;  /* 改成你的品牌色 */
}
\`\`\`

---

### 修改TabBar图标

替换 `assets/icons/` 目录下的图片：

- `home.png` / `home-active.png` - 首页
- `match.png` / `match-active.png` - 匹配
- `my.png` / `my-active.png` - 我的

要求：尺寸81x81像素，PNG格式

---

### 修改分享海报

**文件**: `pages/my/my.js` 中的 `drawPoster()` 函数

可自定义：

- 背景颜色
- 文字内容
- 二维码位置
- Logo展示

---

## ✨ 下一步

配置完成后，你可以：

1. 📖 阅读[开发文档](../开发文档/小程序开发完成说明.md)
2. 🎨 自定义UI样式
3. 🔧 添加新功能
4. 🚀 准备上线发布

---

**祝开发顺利！** 🎉