f3195d9331
Simplify homepage, show chapter counts, display directory, trim bottom nav, in-page match feature, move marketing content, and enhance "My" page. #VERCEL_SKIP Co-authored-by: undefined <undefined+undefined@users.noreply.github.com>
273 lines
4.5 KiB
Markdown
273 lines
4.5 KiB
Markdown
# 小程序快速配置指南 ⚡
|
||
|
||
> 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. 🚀 准备上线发布
|
||
|
||
---
|
||
|
||
**祝开发顺利！** 🎉
|