如何让微信小程序与Web应用共享同一套API接口？

要让微信小程序和Web应用共享同一套API接口，可以按照以下架构设计：

一、核心架构设计

1. 统一后端API服务

// 示例：Node.js + Express
const express = require('express');
const app = express();

// 统一的API接口
app.get('/api/products', (req, res) => {
  // 业务逻辑
  res.json({ data: products });
});

app.post('/api/orders', (req, res) => {
  // 订单处理逻辑
  res.json({ success: true });
});

2. API网关层（推荐）

客户端 → API网关 → 微服务
          ↓
   统一认证、限流、日志

二、关键技术实现

1. 跨域处理（Web端需要）

// 后端CORS配置
app.use(cors({
  origin: ['https://your-web-domain.com', 'https://your-other-domain.com'],
  credentials: true
}));

2. 统一响应格式

{
  "code": 200,
  "message": "success",
  "data": {...},
  "timestamp": 1620000000
}

3. 认证方案

// JWT Token方案（两端通用）
// 小程序端：wx.login获取code，后端换token
// Web端：用户名密码登录获取token

// 中间件
const authMiddleware = (req, res, next) => {
  const token = req.header('Authorization');
  // 验证逻辑
  next();
};

三、小程序与Web差异处理

1. 请求封装适配

// 小程序端封装
const wxRequest = (url, options) => {
  return new Promise((resolve, reject) => {
    wx.request({
      url: `${API_BASE_URL}${url}`,
      header: {
        'Authorization': `Bearer ${token}`,
        'Content-Type': 'application/json'
      },
      ...options,
      success: resolve,
      fail: reject
    });
  });
};

// Web端封装（使用axios/fetch）
const webRequest = async (url, options) => {
  const response = await fetch(`${API_BASE_URL}${url}`, {
    headers: {
      'Authorization': `Bearer ${token}`,
      'Content-Type': 'application/json'
    },
    ...options
  });
  return response.json();
};

2. 环境变量配置

// config.js - 多环境配置
const config = {
  development: {
    apiBase: 'http://localhost:3000/api'
  },
  production: {
    apiBase: 'https://api.yourdomain.com/api'
  }
};

// 根据环境选择
const API_BASE_URL = config[process.env.NODE_ENV].apiBase;

四、最佳实践建议

1. API版本管理

/api/v1/products
/api/v2/products

2. 错误处理统一

// 错误中间件
app.use((err, req, res, next) => {
  const status = err.status || 500;
  res.status(status).json({
    code: status,
    message: err.message || 'Internal Server Error',
    data: null
  });
});

3. 接口文档

• 使用Swagger/OpenAPI
• 保持文档与代码同步

4. 安全考虑

// 小程序安全域名配置
// 在微信公众平台配置request合法域名

// 防CSRF（Web端）
app.use(csurf());

// 请求频率限制
const rateLimit = require('express-rate-limit');
const limiter = rateLimit({
  windowMs: 15 * 60 * 1000,
  max: 100
});
app.use('/api/', limiter);

五、部署架构示例

                   [负载均衡]
                      ↓
              [API网关/反向XX] (Nginx)
                      ↓
        -------------------------------
        ↓             ↓              ↓
   [认证服务]    [业务服务1]    [业务服务2]
                      ↓
                [数据库/缓存]

六、监控与维护

1. 日志收集：统一日志格式
2. 性能监控：API响应时间、错误率
3. 报警机制：异常时及时通知

注意事项

1. 小程序限制：注意微信小程序的网络请求限制（域名需备案、HTTPS等）
2. 数据格式：确保返回数据在小程序和Web端都能正常解析
3. 文件上传：两端的文件上传处理可能不同
4. 会话管理：小程序使用wx.checkSession，Web使用Cookie/Session

通过这种设计，你可以实现一套API同时服务小程序和Web应用，只需在前端进行适当的适配封装即可。