# 微信小程序真机调试网络配置说明

## 问题现象

在微信开发者工具中使用真机调试时，手机端显示"网络请求失败，请检查网络连接"。

## 问题原因

真机调试时，手机无法访问 `localhost` 或 `127.0.0.1`，因为：
- 手机上的 `localhost` 指向手机本身，不是开发电脑
- 必须使用开发电脑的**局域网IP地址**才能访问

## 解决方案

### 步骤1：获取本机IP地址

#### Windows系统：
```bash
ipconfig
```
查找 **"IPv4 地址"**，通常格式为 `192.168.x.x` 或 `10.x.x.x`

#### Mac/Linux系统：
```bash
ifconfig
```
查找 **"inet"** 后面的IP地址

#### 快速获取（Windows）：
```bash
ipconfig | findstr /i "IPv4"
```

### 步骤2：修改配置文件

打开 `books/utils/config.js` 文件，找到 `getLocalIP()` 函数：

```javascript
const getLocalIP = () => {
    // 将下面的IP地址改为你的本机IP地址
    return 'http://192.168.1.100:8001/api'  // ⚠️ 请修改为你的实际IP地址
}
```

**修改示例**：
- 如果你的IP是 `192.168.179.1`，端口是 `8001`
- 则修改为：`return 'http://192.168.179.1:8001/api'`

### 步骤3：确认后端端口

检查 `book/src/main/resources/application.properties` 中的端口配置：

```properties
server.port=8001
```

确保配置文件中的端口与后端实际端口一致。

### 步骤4：确保手机和电脑在同一网络

- 手机和开发电脑必须连接**同一个WiFi网络**
- 如果使用手机热点，确保电脑连接的是手机热点

### 步骤5：检查防火墙

确保Windows防火墙允许8001端口的访问：

1. 打开"Windows Defender 防火墙"
2. 点击"高级设置"
3. 添加入站规则，允许8001端口

或者临时关闭防火墙进行测试。

### 步骤6：测试连接

在手机浏览器中访问：
```
http://你的IP地址:8001/api/user/login
```

如果能看到JSON响应或错误信息，说明网络连接正常。

### 步骤7：重新编译小程序

修改配置文件后，需要：
1. 保存文件
2. 在微信开发者工具中点击"编译"或"重新编译"
3. 重新进行真机调试

## 配置示例

### 示例1：开发工具调试（仅开发工具可用）
```javascript
return 'http://localhost:8001/api'
```

### 示例2：真机调试（推荐）
```javascript
// IP地址：192.168.179.1
// 端口：8001
return 'http://192.168.179.1:8001/api'
```

## 常见问题

### Q1: 有多个IP地址，应该用哪个？

**A:** 通常使用 `192.168.x.x` 开头的IP地址，这是局域网IP。如果有多个：
- 优先使用 `192.168.x.x` 格式的
- 可以在手机浏览器中测试哪个可以访问

### Q2: 修改后还是连接不上？

**A:** 检查以下几点：
1. ✅ 后端服务是否正在运行
2. ✅ IP地址是否正确（在手机浏览器中测试）
3. ✅ 端口号是否正确（8001）
4. ✅ 手机和电脑是否在同一WiFi
5. ✅ 防火墙是否阻止了端口
6. ✅ 是否重新编译了小程序

### Q3: 开发工具可以，真机不行？

**A:** 这是典型的localhost问题，必须使用IP地址。

### Q4: 每次IP地址都变化怎么办？

**A:** 可以：
1. 在路由器中为电脑设置静态IP
2. 或者每次修改配置文件（推荐开发时使用）

### Q5: 如何快速切换开发/真机模式？

**A:** 可以在配置文件中添加环境判断：

```javascript
const getLocalIP = () => {
    // 开发工具调试
    // #ifdef MP-WEIXIN
    // 可以通过编译模式或环境变量判断
    // #endif
    
    // 真机调试（推荐）
    return 'http://192.168.179.1:8001/api'
}
```

## 验证配置

配置完成后，可以在小程序中添加测试代码：

```javascript
import config from '@/utils/config.js'

onLoad() {
    console.log('API地址:', config.BASE_URL)
    // 应该显示：http://192.168.x.x:8001/api
}
```

## 注意事项

1. ⚠️ **真机调试必须使用IP地址，不能使用localhost**
2. ⚠️ **确保手机和电脑在同一WiFi网络**
3. ⚠️ **修改配置后需要重新编译小程序**
4. ⚠️ **生产环境需要使用HTTPS和正式域名**

## 生产环境配置

正式发布时，需要：

1. 在小程序后台配置服务器域名
2. 修改 `config.js` 为生产环境地址：
   ```javascript
   return 'https://your-domain.com/api'
   ```
3. 修改 `manifest.json` 启用域名校验：
   ```json
   "mp-weixin": {
       "setting": {
           "urlCheck": true
       }
   }
   ```