微信小程序如何配置自己的服务器域名和接口地址？

我来为你详细讲解微信小程序配置服务器域名的完整步骤：

一、配置前的准备工作

1. 获取服务器信息

• 服务器公网IP地址
• 已备案的域名（必须已备案）
• 配置好SSL证书（必须HTTPS，TLS 1.2+）
• 服务器开放443（HTTPS）和80（HTTP）端口

2. 服务器要求

• ✅ 必须支持HTTPS（TLS 1.2及以上版本）
• ✅ 域名必须已备案
• ✅ 服务器需在国内（海外需特殊配置）
• ❌ 不支持IP地址直接访问
• ❌ 不支持端口号（默认443）

二、在小程序后台配置

步骤1：登录小程序后台

1. 访问 微信公众平台
2. 扫码登录你的小程序账号

步骤2：进入开发设置

1. 左侧菜单 → 开发 → 开发管理
2. 点击 开发设置 标签页

步骤3：配置服务器域名

找到 服务器域名 配置区域：

request合法域名（最常用）

• 用于wx.request() API请求
• 最多可配置200个域名
• 格式：https://api.yourdomain.com

socket合法域名

• 用于WebSocket连接
• 格式：wss://socket.yourdomain.com

uploadFile合法域名

• 用于文件上传
• 格式：https://upload.yourdomain.com

downloadFile合法域名

• 用于文件下载
• 格式：https://download.yourdomain.com

步骤4：填写域名

1. 点击 修改 按钮
2. 输入完整的域名（无需加路径）

   正确：https://api.example.com
   错误：https://api.example.com/api/

3. 点击 保存
4. 扫码验证（管理员扫码确认）

三、小程序代码配置

1. 基础配置方式

// config.js 或 app.js
const config = {
  apiBaseUrl: 'https://api.yourdomain.com',
  // 或者根据环境切换
  // apiBaseUrl: process.env.NODE_ENV === 'development' 
  //   ? 'https://dev-api.yourdomain.com'
  //   : 'https://api.yourdomain.com'
}

// 使用示例
wx.request({
  url: `${config.apiBaseUrl}/user/login`,
  method: 'POST',
  data: { /* ... */ },
  success(res) {
    console.log(res.data)
  }
})

2. 创建请求封装

// utils/request.js
const BASE_URL = 'https://api.yourdomain.com'

const request = (options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: BASE_URL + options.url,
      method: options.method || 'GET',
      data: options.data || {},
      header: {
        'Content-Type': 'application/json',
        'Authorization': wx.getStorageSync('token') || '',
        ...options.header
      },
      success: (res) => {
        if (res.statusCode === 200) {
          resolve(res.data)
        } else {
          reject(res.data)
        }
      },
      fail: (err) => {
        reject(err)
      }
    })
  })
}

// 导出
export default request

3. 使用封装后的请求

import request from '../utils/request.js'

// 登录示例
const login = async (username, password) => {
  try {
    const res = await request({
      url: '/user/login',
      method: 'POST',
      data: { username, password }
    })
    return res
  } catch (error) {
    console.error('登录失败:', error)
  }
}

四、多环境配置方案

方案1：使用配置文件

// config/index.js
const env = 'production' // 可通过编译条件修改

const configs = {
  development: {
    baseUrl: 'https://dev-api.yourdomain.com'
  },
  test: {
    baseUrl: 'https://test-api.yourdomain.com'
  },
  production: {
    baseUrl: 'https://api.yourdomain.com'
  }
}

export default configs[env]

方案2：使用云开发环境

// 如果使用微信云开发
wx.cloud.init({
  env: 'your-env-id', // 云环境ID
  traceUser: true
})

五、常见问题解决

1. 域名配置不生效

• 原因：DNS解析需要时间，通常10-30分钟
• 解决：等待DNS生效，或清除微信缓存

2. HTTPS证书问题

• 错误：request:fail ssl hand shake error
• 解决：
  1. 检查证书是否有效
  2. 确保支持TLS 1.2+
  3. 使用SSL检测工具检查

3. 跨域问题

• 小程序不存在浏览器跨域限制
• 但服务器可能需要配置CORS或检查Referer

4. 备案问题

• 新备案域名需要24小时后才能配置
• 确保备案信息与小程序主体一致

六、最佳实践建议

1. 域名规划

   api.example.com      // API接口
   static.example.com   // 静态资源
   ws.example.com       // WebSocket

2. 安全配置

   • 服务器验证小程序请求头
   • 设置请求频率限制
   • 重要接口添加签名验证

3. 监控与日志

   • 记录所有接口请求
   • 设置异常报警
   • 定期检查证书有效期

七、快速检查清单

• [ ] 域名已备案
• [ ] SSL证书有效且支持TLS 1.2+
• [ ] 服务器防火墙开放443端口
• [ ] 小程序后台域名配置已保存
• [ ] 代码中域名配置正确
• [ ] 微信开发者工具已重启

配置完成后，建议先在微信开发者工具中测试，确认无误后再提交审核发布。