4.5 KiB
4.5 KiB
小程序快速配置指南 ⚡
5分钟内完成配置，快速开始开发！
🎯 配置前准备
- ✅ 已安装微信开发者工具
- ✅ 已有小程序AppID（或使用测试AppID）
- ✅ 后端API服务器已启动
📝 必须配置的3个地方
1️⃣ 配置小程序AppID
文件: project.config.json
{
"appid": "你的小程序AppID", // ⬅️ 改这里
"projectname": "soul-party-book"
}
💡 没有AppID？使用测试号：
wxd7e8c8a8e8c8a8e8
2️⃣ 配置API服务器地址
文件: app.js
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
🚀 启动步骤
第一步：启动后端服务器
在项目根目录运行：
# 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"
解决：检查后端服务器是否启动
# 重新启动后端
pnpm dev
Q2: 页面空白，没有数据
解决：检查API地址配置
- 打开
app.js - 确认
apiBase地址正确 - 在浏览器访问
http://localhost:3000/api测试
Q3: 图片不显示
解决：图片路径问题
临时方案：使用在线图片URL
// 将本地路径
src="/assets/images/book-cover.png"
// 改为在线URL
src="https://picsum.photos/400/560"
Q4: 支付测试失败
解决：本地开发暂时无法测试真实支付
- 使用Mock数据模拟支付成功
- 真实支付需要：
- 配置微信支付商户号
- 部署到HTTPS域名
- 在小程序后台配置支付权限
Q5: 模拟器和真机效果不一致
解决：以真机为准
# 真机调试步骤：
1. 点击工具栏"预览"
2. 手机微信扫码
3. 在手机上调试
📞 获取帮助
技术支持
- 文档: 查看
开发文档/目录
官方文档
🎨 自定义配置（可选）
修改主题色
文件: app.wxss
.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样式
- 🔧 添加新功能
- 🚀 准备上线发布
祝开发顺利！ 🎉