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>
4.5 KiB
小程序快速配置指南 ⚡
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️⃣ 配置服务器域名（线上部署时）
登录小程序后台：
开发管理 → 开发设置 → 服务器域名
``` 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 ```
第二步：打开微信开发者工具
- 点击"导入项目"
- 选择
miniprogram文件夹 - 填入AppID（或选择测试号）
- 点击"导入"
第三步：点击编译
点击工具栏的"编译"按钮，等待编译完成。
第四步：开始开发！🎉
现在你可以：
- 👀 在模拟器中查看效果
- 📱 扫码在真机预览
- 🔧 修改代码实时刷新
- 📊 查看Network请求
🧪 功能测试清单
✅ 首页测试
- 书籍封面正常显示
- 最新章节列表加载
- 点击章节可跳转阅读
- 购买按钮有响应
✅ 匹配书友测试
- 星空背景动画流畅
- 点击"开始匹配"有动画
- 3-6秒后匹配成功
- 显示匹配用户信息
✅ 我的页面测试
- 点击头像可登录
- 分销中心数据显示
- 生成推广海报功能
- 复制邀请码功能
✅ 阅读页测试
- 章节内容正常渲染
- 书签功能正常
- 目录侧滑打开
- 分享功能正常
🔧 常见问题
Q1: 编译报错 "Cannot find module"
解决：检查后端服务器是否启动
```bash
重新启动后端
pnpm dev ```
Q2: 页面空白，没有数据
解决：检查API地址配置
- 打开
app.js - 确认
apiBase地址正确 - 在浏览器访问
http://localhost:3000/api测试
Q3: 图片不显示
解决：图片路径问题
临时方案：使用在线图片URL
```javascript // 将本地路径 src="/assets/images/book-cover.png"
// 改为在线URL src="https://picsum.photos/400/560" ```
Q4: 支付测试失败
解决：本地开发暂时无法测试真实支付
- 使用Mock数据模拟支付成功
- 真实支付需要：
- 配置微信支付商户号
- 部署到HTTPS域名
- 在小程序后台配置支付权限
Q5: 模拟器和真机效果不一致
解决：以真机为准
```bash
真机调试步骤：
- 点击工具栏"预览"
- 手机微信扫码
- 在手机上调试 ```
📞 获取帮助
技术支持
- 文档: 查看
开发文档/目录
官方文档
🎨 自定义配置（可选）
修改主题色
文件: 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展示
✨ 下一步
配置完成后，你可以：
- 📖 阅读开发文档
- 🎨 自定义UI样式
- 🔧 添加新功能
- 🚀 准备上线发布
祝开发顺利！ 🎉