# 微信小程序本地接口调试配置指南

## 一、当前配置状态

### 1.1 后端接口地址配置

**文件位置**: `app/config.js`

```javascript
module.exports = {
  baseUrl: 'http://localhost:8080',  // ✅ 已配置为本地接口
  // ...其他配置
}
```

### 1.2 问题说明

微信小程序默认**不允许访问本地接口**（localhost 或 127.0.0.1），会报以下错误：

```
request:fail url not in domain list
// 或
request:fail -104:net::ERR_CONNECTION_FAILED
```

## 二、解决方案（3种方法）

### 方案1：开发者工具中关闭域名校验（推荐用于开发调试）

这是最简单快速的方法，适合本地开发调试。

#### 步骤：

1. **打开微信开发者工具**
   - 确保已安装微信开发者工具
   - 导入项目：选择 `app` 目录

2. **关闭域名校验**
   - 点击右上角"详情"按钮
   - 切换到"本地设置"选项卡
   - 勾选 ✅ **不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书**

3. **确认配置生效**
   ```javascript
   // app/config.js 保持
   baseUrl: 'http://localhost:8080'
   ```

4. **重新编译**
   - 点击"编译"按钮
   - 查看控制台是否有网络请求

#### 优点：
- ✅ 配置简单，立即生效
- ✅ 适合开发调试
- ✅ 不需要修改代码

#### 缺点：
- ❌ 仅在开发者工具中有效
- ❌ 真机预览时无效
- ❌ 正式版本必须配置合法域名

---

### 方案2：使用内网IP地址（推荐用于真机调试）

使用电脑的内网IP地址替代localhost，可以让手机访问电脑上的后端服务。

#### 步骤：

1. **查找电脑内网IP**

   **Windows系统**：
   ```bash
   # 命令行执行
   ipconfig
   
   # 查找类似这样的地址
   IPv4 地址 . . . . . . . . . . . . : 192.168.1.100
   ```

   **Mac/Linux系统**：
   ```bash
   # 终端执行
   ifconfig
   
   # 或
   ip addr show
   
   # 查找以 192.168.x.x 或 10.x.x.x 开头的地址
   ```

2. **修改配置文件**

   **方法A：直接修改config.js（简单但不灵活）**
   ```javascript
   // app/config.js
   module.exports = {
     baseUrl: 'http://192.168.1.100:8080',  // 改为你的内网IP
     // ...
   }
   ```

   **方法B：环境变量配置（推荐）**
   ```javascript
   // app/config.js
   module.exports = {
     // 根据运行环境自动选择
     baseUrl: process.env.NODE_ENV === 'development' 
       ? 'http://192.168.1.100:8080'  // 开发环境：内网IP
       : 'https://api.yourdomain.com',  // 生产环境：线上域名
     // ...
   }
   ```

3. **确保后端允许跨域访问**

   检查后端配置（RuoYi框架默认已配置）：
   ```java
   // ruoyi-framework/src/main/java/com/ruoyi/framework/config/CorsConfig.java
   @Override
   public void addCorsMappings(CorsRegistry registry) {
       registry.addMapping("/**")
           .allowedOriginPatterns("*")  // 允许所有来源
           .allowCredentials(true)
           .allowedMethods("GET", "POST", "PUT", "DELETE")
           .maxAge(3600);
   }
   ```

4. **确保电脑防火墙允许访问**

   **Windows防火墙**：
   - 控制面板 → Windows Defender 防火墙 → 高级设置
   - 入站规则 → 新建规则 → 端口 → TCP → 特定端口 8080
   - 允许连接

   **临时关闭防火墙测试**：
   ```bash
   # Windows（管理员权限）
   netsh advfirewall set allprofiles state off
   
   # 测试完成后记得打开
   netsh advfirewall set allprofiles state on
   ```

5. **手机和电脑连接同一WiFi**
   - 确保手机和电脑在同一局域网
   - 打开微信开发者工具 → 预览 → 扫码真机调试

#### 优点：
- ✅ 可以真机调试
- ✅ 团队成员可以共享调试
- ✅ 接近真实环境

#### 缺点：
- ❌ IP地址可能会变化
- ❌ 需要配置防火墙
- ❌ 仅限同一局域网

---

### 方案3：使用内网穿透工具（推荐用于远程调试）

使用内网穿透工具（如花生壳、ngrok、FRP）将本地服务映射到公网域名。

#### 3.1 使用 ngrok（免费且简单）

1. **下载安装 ngrok**
   - 官网：https://ngrok.com/
   - 下载对应系统版本
   - 注册账号获取authtoken

2. **启动后端服务**
   ```bash
   # 确保后端运行在8080端口
   cd RuoYi-Vue-master
   java -jar ruoyi-admin.jar
   ```

3. **启动 ngrok**
   ```bash
   # Windows
   ngrok.exe http 8080
   
   # Mac/Linux
   ./ngrok http 8080
   ```

4. **获取公网地址**
   ```
   Session Status    online
   Forwarding        https://abc123.ngrok.io -> http://localhost:8080
                     ^^^^^^^^^^^^^^^^^^^^^^^^
                     这就是你的公网地址
   ```

5. **修改配置**
   ```javascript
   // app/config.js
   module.exports = {
     baseUrl: 'https://abc123.ngrok.io',  // ngrok提供的地址
     // ...
   }
   ```

6. **在微信小程序后台配置域名**
   - 登录微信公众平台：https://mp.weixin.qq.com
   - 开发 → 开发管理 → 开发设置 → 服务器域名
   - 配置 request合法域名：`https://abc123.ngrok.io`

#### 3.2 使用花生壳（国内稳定）

1. **下载安装花生壳**
   - 官网：https://hsk.oray.com/
   - 注册账号

2. **创建内网穿透映射**
   - 内网主机：localhost
   - 内网端口：8080
   - 外网域名：系统分配（如 xxx.vicp.fun）

3. **修改配置**
   ```javascript
   // app/config.js
   module.exports = {
     baseUrl: 'http://xxx.vicp.fun',  // 花生壳提供的域名
     // ...
   }
   ```

#### 优点：
- ✅ 可以远程访问
- ✅ 稳定的域名
- ✅ 支持HTTPS

#### 缺点：
- ❌ 需要第三方服务
- ❌ 免费版有限制
- ❌ 可能有延迟

---

## 三、推荐配置方案

### 3.1 多环境配置（最佳实践）

修改 `app/config.js`，支持多环境自动切换：

```javascript
// app/config.js

// 环境配置
const ENV_CONFIG = {
  // 开发环境
  development: {
    baseUrl: 'http://192.168.1.100:8080',  // 修改为你的内网IP
    description: '开发环境'
  },
  // 测试环境
  test: {
    baseUrl: 'http://test.yourdomain.com',
    description: '测试环境'
  },
  // 生产环境
  production: {
    baseUrl: 'https://api.yourdomain.com',
    description: '生产环境'
  }
}

// 当前环境（手动切换）
const CURRENT_ENV = 'development'  // 可选: development, test, production

// 导出配置
module.exports = {
  baseUrl: ENV_CONFIG[CURRENT_ENV].baseUrl,
  
  // 应用信息
  appInfo: {
    name: "民航调度系统",
    version: "1.1.0",
    logo: "/static/logo.png",
    site_url: "http://ruoyi.vip",
    
    // 环境信息（用于调试）
    env: CURRENT_ENV,
    envDescription: ENV_CONFIG[CURRENT_ENV].description,
    
    // 协议（使用本地页面）
    agreements: [
      {
        title: "隐私政策",
        url: "/pages/mine/privacy-policy/index"
      },
      {
        title: "用户服务协议",
        url: "/pages/mine/user-agreement/index"
      }
    ]
  }
}
```

### 3.2 显示当前环境信息（调试用）

在首页显示当前使用的接口地址：

```vue
<!-- app/pages/index.vue -->
<template>
  <view>
    <!-- 开发环境提示 -->
    <view v-if="isDev" class="dev-info">
      <text>{{ envInfo }}</text>
    </view>
    
    <!-- ...其他内容 -->
  </view>
</template>

<script>
export default {
  data() {
    return {
      isDev: process.env.NODE_ENV === 'development',
      envInfo: ''
    }
  },
  onLoad() {
    const config = getApp().globalData.config
    this.envInfo = `环境：${config.appInfo.envDescription}\n接口：${config.baseUrl}`
  }
}
</script>

<style>
.dev-info {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  padding: 10rpx;
  font-size: 20rpx;
  text-align: center;
  z-index: 9999;
}
</style>
```

---

## 四、完整配置步骤（推荐流程）

### 步骤1: 启动后端服务

```bash
# 进入后端项目目录
cd d:\project\急救转运\code\Api\RuoYi-Vue-master

# 启动后端（确保端口8080）
# 方法1: IDEA直接运行 RuoYiApplication.java
# 方法2: 命令行运行
mvn spring-boot:run
```

### 步骤2: 查找电脑内网IP

```bash
# Windows
ipconfig

# 找到类似这样的地址
以太网适配器 以太网:
   IPv4 地址 . . . . . . . . . . . . : 192.168.1.100
```

### 步骤3: 修改配置文件

```javascript
// app/config.js
module.exports = {
  baseUrl: 'http://192.168.1.100:8080',  // 改为你的IP
  // ...
}
```

### 步骤4: 微信开发者工具配置

1. **打开项目**
   - HBuilderX → 运行 → 运行到小程序模拟器 → 微信开发者工具
   - 或直接在微信开发者工具中导入 `app` 目录

2. **关闭域名校验**
   - 详情 → 本地设置
   - ✅ 勾选"不校验合法域名..."

3. **清除缓存重新编译**
   - 工具 → 清除缓存 → 清除所有缓存
   - 点击"编译"

### 步骤5: 验证配置

1. **检查网络请求**
   - 打开调试器 → Network
   - 登录系统，查看请求地址是否正确

2. **测试接口**
   ```javascript
   // 在控制台执行
   console.log(getApp().globalData.config.baseUrl)
   // 应该输出: http://192.168.1.100:8080
   ```

---

## 五、常见问题排查

### 问题1: request:fail url not in domain list

**原因**: 域名校验未关闭

**解决**:
- 微信开发者工具 → 详情 → 本地设置
- ✅ 勾选"不校验合法域名..."

---

### 问题2: request:fail -104:net::ERR_CONNECTION_FAILED

**原因**: 
1. 后端服务未启动
2. IP地址错误
3. 防火墙阻止

**解决**:
```bash
# 1. 检查后端是否启动
netstat -ano | findstr 8080

# 2. 检查IP是否正确
ipconfig

# 3. 测试后端是否可访问
# 浏览器打开: http://192.168.1.100:8080
```

---

### 问题3: 真机调试无法访问

**原因**: 手机和电脑不在同一WiFi

**解决**:
1. 确保手机和电脑连接同一WiFi
2. 使用内网IP而非localhost
3. 检查防火墙设置

---

### 问题4: 跨域错误

**原因**: 后端未配置跨域

**解决**:
```java
// ruoyi-framework/src/main/java/com/ruoyi/framework/config/CorsConfig.java
// 确保已配置CORS
```

---

## 六、不同开发工具的配置

### 6.1 HBuilderX

1. **运行到微信小程序**
   - 菜单 → 运行 → 运行到小程序模拟器 → 微信开发者工具

2. **配置微信开发者工具路径**
   - 工具 → 设置 → 运行配置
   - 配置"微信开发者工具路径"

3. **manifest.json配置**
   - 源码视图 → mp-weixin → appid
   - 填写你的小程序AppID

### 6.2 直接使用微信开发者工具

1. **导入项目**
   - 打开微信开发者工具
   - 选择"导入项目"
   - 项目目录：`app`
   - AppID：使用测试号或你的AppID

2. **配置**
   - 详情 → 本地设置 → 不校验域名

---

## 七、推荐配置（最终版本）

```javascript
// app/config.js - 完整配置示例

// 自动检测运行环境
const isDev = process.env.NODE_ENV === 'development'
const isMP = process.env.VUE_APP_PLATFORM === 'mp-weixin'

// 获取本地IP（需要手动配置）
const LOCAL_IP = '192.168.1.100'  // ⚠️ 修改为你的电脑IP

// 环境配置
const ENV_CONFIG = {
  // 本地开发
  local: `http://${LOCAL_IP}:8080`,
  
  // 测试环境
  test: 'http://test.yourdomain.com',
  
  // 生产环境
  prod: 'https://api.yourdomain.com'
}

// 自动选择环境
let baseUrl = ENV_CONFIG.local  // 默认本地开发

// 根据不同条件选择环境
if (process.env.UNI_PLATFORM === 'h5' && !isDev) {
  // H5生产环境
  baseUrl = ENV_CONFIG.prod
}

module.exports = {
  baseUrl: baseUrl,
  
  appInfo: {
    name: "民航调度系统",
    version: "1.1.0",
    logo: "/static/logo.png",
    site_url: "http://ruoyi.vip",
    
    // 显示当前环境（开发时可见）
    showEnv: isDev,
    currentEnv: baseUrl,
    
    agreements: [
      {
        title: "隐私政策",
        url: "/pages/mine/privacy-policy/index"
      },
      {
        title: "用户服务协议",
        url: "/pages/mine/user-agreement/index"
      }
    ]
  }
}
```

---

## 八、总结

### 开发阶段推荐方案

| 场景 | 推荐方案 | 配置复杂度 |
|------|----------|-----------|
| 微信开发者工具调试 | 方案1 + localhost | ⭐ 简单 |
| 真机调试 | 方案2 + 内网IP | ⭐⭐ 中等 |
| 远程调试/演示 | 方案3 + 内网穿透 | ⭐⭐⭐ 复杂 |

### 快速开始（最简单方式）

1. **启动后端**: 运行 RuoYiApplication.java
2. **配置前端**: `config.js` 中 `baseUrl: 'http://localhost:8080'`
3. **微信工具**: 勾选"不校验合法域名"
4. **开始调试**: 点击"编译"

### 注意事项

⚠️ **安全提醒**：
- 生产环境必须使用HTTPS域名
- 不要将测试配置提交到代码仓库
- 使用 `.env` 文件管理敏感配置

⚠️ **性能提醒**：
- 内网穿透会增加延迟
- 建议优先使用局域网调试
- 大文件上传建议使用直连

---

如有其他问题，请参考：
- 微信小程序官方文档：https://developers.weixin.qq.com/miniprogram/dev/
- uni-app官方文档：https://uniapp.dcloud.io/