Mini_Program/微信小程序连接说明.md

微信小程序连接后端API配置说明

重要配置步骤

1. 配置 manifest.json（已配置）

在 books/manifest.json 中，微信小程序配置如下：

"mp-weixin": {
    "appid": "",
    "setting": {
        "urlCheck": false  // 开发环境不校验域名
    },
    "usingComponents": true
}

说明：

• urlCheck: false 表示开发环境不校验合法域名，允许访问本地服务器
• 正式发布时需要在小程序后台配置服务器域名

2. 配置API地址

编辑 books/utils/config.js 文件，修改API地址：

方式一：使用 localhost（仅开发工具可用）

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

方式二：使用本机IP地址（推荐，真机调试可用）

// 取消注释并填入你的本机IP地址
return 'http://192.168.1.100:8081/api'

获取本机IP地址方法：

Windows系统：

ipconfig

查找 "IPv4 地址"，例如：192.168.1.100

Mac/Linux系统：

ifconfig

查找 "inet"，例如：192.168.1.100

3. 微信开发者工具设置

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

4. 启动后端服务

cd book
mvn spring-boot:run

确保后端服务运行在 http://localhost:8081 或对应的IP地址

测试登录

测试账号

根据数据库中的测试数据，可以使用以下账号：

1. 用户名: zhangsan 密码: 123456
2. 用户名: lisi 密码: 123456
   
3. 用户名: wangwu 密码: 123456

测试步骤

1. 在微信开发者工具中打开项目
2. 进入登录页面
3. 输入用户名和密码
4. 点击登录按钮
5. 查看控制台是否有错误信息

常见问题

1. 网络请求失败

问题：显示"网络请求失败，请检查网络连接"

解决方案：

• 检查后端服务是否启动
• 检查 config.js 中的API地址是否正确
• 如果使用IP地址，确保手机/电脑与开发机器在同一网络
• 检查防火墙是否阻止了8080端口

2. 域名不在合法域名列表中

问题：提示"不在以下 request 合法域名列表中"

解决方案：

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

3. 真机调试无法连接

问题：开发工具可以，真机不行

解决方案：

• 必须使用IP地址，不能使用 localhost
• 确保手机和电脑在同一WiFi网络
• 检查手机是否能访问电脑的IP地址（可以在手机浏览器中测试）

4. 后端跨域问题

问题：后端返回CORS错误

解决方案：

• 检查后端 UserController 是否有 @CrossOrigin(origins = "*") 注解
• 如果还有问题，检查后端配置

生产环境配置

正式发布时，需要：

1. 在小程序后台配置服务器域名：

   • 登录微信公众平台
   • 进入"开发" -> "开发管理" -> "开发设置"
   • 在"服务器域名"中添加你的后端API域名
   • 必须使用HTTPS（生产环境）

2. 修改API地址：

   // books/utils/config.js
   return 'https://your-domain.com/api'
   

3. 修改manifest.json：

   "mp-weixin": {
      "setting": {
          "urlCheck": true  // 生产环境启用域名校验
      }
   }
   

调试技巧

1. 查看网络请求

在微信开发者工具中：

• 点击"调试器" -> "Network"
• 可以看到所有网络请求和响应

2. 查看控制台日志

在登录页面添加日志：

console.log('API地址:', BASE_URL)
console.log('请求参数:', { username, password })

3. 测试API连接

可以在小程序中临时添加测试代码：

uni.request({
    url: 'http://localhost:8081/api/user/login',
    method: 'POST',
    data: { username: 'zhangsan', password: '123456' },
    success: (res) => {
        console.log('测试请求成功:', res)
    },
    fail: (err) => {
        console.error('测试请求失败:', err)
    }
})

文件结构

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

快速开始

1. ✅ 修改 books/utils/config.js 中的API地址
2. ✅ 启动后端服务：cd book && mvn spring-boot:run
3. ✅ 在微信开发者工具中打开项目
4. ✅ 确保勾选"不校验合法域名"
5. ✅ 测试登录功能