Mini_Program/快速配置指南.md

微信小程序连接后端 - 快速配置指南

🚀 三步快速配置

第一步：启动后端服务

cd book
mvn spring-boot:run

后端服务默认运行在：http://localhost:8081

注意：当前后端端口是8081，如果修改了请同步修改 books/utils/config.js 中的API地址

第二步：配置前端API地址

编辑 books/utils/config.js 文件：

开发环境（微信开发者工具）：

return 'http://localhost:8081/api'

真机调试（手机测试）：

// 1. 获取本机IP地址
// Windows: ipconfig
// Mac/Linux: ifconfig

// 2. 修改为你的IP地址（例如：192.168.1.100）
return 'http://192.168.1.100:8081/api'

第三步：微信开发者工具设置

1. 打开微信开发者工具
2. 点击右上角 "详情" 按钮
3. 在 "本地设置" 标签页中：
   • ✅ 勾选 "不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书"

✅ 测试登录

测试账号

使用以下账号进行测试：

用户名	密码	说明
zhangsan	123456	普通用户
lisi	123456	VIP用户
wangwu	123456	普通用户

测试步骤

1. 在微信开发者工具中打开项目
2. 进入登录页面（pages/login/login.vue）
3. 输入用户名：zhangsan
4. 输入密码：123456
5. 点击"登录"按钮
6. 查看是否成功登录

🔧 常见问题快速解决

❌ 问题1：网络请求失败

解决方法：

• 检查后端服务是否启动（访问 http://localhost:8081 查看）
• 检查 books/utils/config.js 中的端口是否正确
• 检查后端 application.properties 中的端口配置

❌ 问题2：域名校验错误

解决方法：

• 确保在微信开发者工具中勾选了"不校验合法域名"
• 检查 books/manifest.json 中 urlCheck 是否为 false

❌ 问题3：真机无法连接

解决方法：

• 必须使用IP地址，不能使用 localhost
• 确保手机和电脑在同一WiFi网络
• 在手机浏览器中测试能否访问：http://你的IP:8081

📝 文件说明

• books/utils/config.js - API配置文件（需要修改这里）
• books/utils/api.js - API请求封装（已配置好）
• books/pages/login/login.vue - 登录页面（已连接后端）
• books/manifest.json - 小程序配置（已配置urlCheck）

🎯 验证配置

配置完成后，在登录页面输入测试账号，如果看到：

• ✅ "登录成功" 提示 → 配置成功！
• ❌ "登录失败" 提示 → 检查后端服务和控制台错误信息

📞 需要帮助？

如果遇到问题，请检查：

1. 后端服务是否正常运行
2. 控制台是否有错误信息
3. 网络请求是否发送成功（在微信开发者工具的Network面板查看）