UniApp 示例

概述

本示例展示了如何在 UniApp 项目中集成 ApiSorcery。UniApp 是一个跨平台框架，允许您编写一次代码，部署到多个平台，包括 iOS、Android、Web 和各种小程序。

特性

• 跨平台兼容性：在所有 UniApp 支持的平台上无缝运行
• TypeScript 支持：完整的 TypeScript 集成，提供更好的开发体验
• 自动生成 API 客户端：从 Swagger/OpenAPI 规范生成类型安全的 API 客户端
• 请求/响应拦截器：内置请求和响应处理支持
• 错误处理：全面的错误处理，提供适当的错误类型

快速设置

1. 安装 ApiSorcery

npm install -g autoapi

2. 初始化配置

autoapi init -l uniapp

这将创建一个 .autoapirc.json 配置文件：

{
  "application": {
    "name": "UniApp API 客户端",
    "language": "uniapp",
    "outputDir": "./src/api/auto"
  },
  "services": [
    {
      "code": "main",
      "name": "主服务",
      "source": "https://your-api.com/swagger.json",
      "enabled": true
    }
  ]
}

3. 生成 API 客户端

autoapi generate

4. 在 UniApp 中使用

import { ApiMain } from '@/api/auto/main/api';

// 在页面或组件中
export default {
  data() {
    return {
      users: []
    };
  },
  async onLoad() {
    try {
      const response = await ApiMain.getUsers();
      this.users = response.data;
    } catch (error) {
      console.error('获取用户失败:', error);
    }
  }
};

平台特定注意事项

小程序

当目标平台为小程序（微信、支付宝等）时，请确保将您的 API 端点添加到相应平台配置的白名单中。

H5/Web

对于 H5 部署，请在后端服务器上正确配置 CORS 以允许跨域请求。

App（iOS/Android）

原生应用构建无需额外配置即可正常工作。

最佳实践

1. 环境配置：为开发、测试和生产环境使用不同的 API 端点
2. 错误处理：实现全局错误处理以获得一致的用户体验
3. 加载状态：在 API 调用期间显示加载指示器
4. 缓存：实现适当的缓存策略以获得更好的性能
5. 类型安全：利用 TypeScript 获得更好的代码质量和开发体验