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

问题现象

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

问题原因

真机调试时，手机无法访问 localhost 或 127.0.0.1，因为：

手机上的 localhost 指向手机本身，不是开发电脑
必须使用开发电脑的局域网IP地址才能访问

解决方案

步骤1：获取本机IP地址

Windows系统：

ipconfig

查找 "IPv4 地址"，通常格式为 192.168.x.x 或 10.x.x.x

Mac/Linux系统：

ifconfig

查找 "inet" 后面的IP地址

快速获取（Windows）：

ipconfig | findstr /i "IPv4"

步骤2：修改配置文件

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

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 中的端口配置：

server.port=8001

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

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

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

步骤5：检查防火墙

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

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

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

步骤6：测试连接

在手机浏览器中访问：

http://你的IP地址:8001/api/user/login

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

步骤7：重新编译小程序

修改配置文件后，需要：

保存文件
在微信开发者工具中点击"编译"或"重新编译"
重新进行真机调试

配置示例

示例1：开发工具调试（仅开发工具可用）

return 'http://localhost:8001/api'

示例2：真机调试（推荐）

// 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: 检查以下几点：

✅ 后端服务是否正在运行
✅ IP地址是否正确（在手机浏览器中测试）
✅ 端口号是否正确（8001）
✅ 手机和电脑是否在同一WiFi
✅ 防火墙是否阻止了端口
✅ 是否重新编译了小程序

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

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

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

A: 可以：

在路由器中为电脑设置静态IP
或者每次修改配置文件（推荐开发时使用）

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

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

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

验证配置

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

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

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

注意事项

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

生产环境配置

正式发布时，需要：

在小程序后台配置服务器域名
修改 config.js 为生产环境地址：
```
return 'https://your-domain.com/api'
```

修改 manifest.json 启用域名校验：

"mp-weixin": {
   "setting": {
       "urlCheck": true
   }
}

真机调试网络配置说明.md 4.4 KB Pysyvä linkki Historia Raaka