# uni_jsonp

**Repository Path**: web/uni_jsonp

## Basic Information

- **Project Name**: uni_jsonp
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-11-26
- **Last Updated**: 2025-11-26

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# JSONP 插件演示

一个基于 uni-app 框架的 JSONP 插件演示应用，展示了如何使用 JSONP 技术解决跨域数据请求问题。

## 项目简介

本项目是一个完整的 JSONP 插件演示程序，不仅提供了 JSONP 工具函数的实现，还包含了多个实际应用场景的示例，帮助开发者理解和使用 JSONP 技术。

## 功能特点

- 🔧 **统一跨平台JSONP助手**：自动适配不同平台的最佳方案
- 📅 **节假日查询功能**：通过 JSONP 获取指定日期的节假日信息
- 🌤️ **天气查询功能**：展示如何使用 JSONP 获取天气数据
- 🌐 **IP 地址查询**：获取当前客户端的 IP 地址信息
- 🎨 **美观的用户界面**：采用现代化的卡片式设计
- 🔄 **加载状态指示**：提供清晰的加载状态反馈
- ❌ **友好的错误处理**：直观显示请求失败的原因

## 技术栈

- **框架**：uni-app
- **前端**：Vue 3
- **样式**：uni-app 内置样式系统
- **跨域解决方案**：JSONP (JSON with Padding)

## 项目结构

```
JSONP/
├── App.vue                 # 应用主组件
├── main.js                 # 应用入口文件
├── manifest.json           # 应用配置文件
├── pages.json              # 页面路由配置
├── uni.scss                # 全局样式文件
├── uni.promisify.adaptor.js # Promise 适配器
├── pages/                  # 页面目录
│   └── index/
│       └── index.vue       # 主页面（演示JSONP使用）
├── utils/                  # 工具函数目录
│   └── jsonp-helper.js     # 统一跨平台JSONP助手
├── static/                 # 静态资源目录
├── unpackage/              # 编译输出目录
└── README.md               # 项目说明文档
```

## 平台兼容性

### JSONP 实现原理

JSONP (JSON with Padding) 是一种解决跨域数据请求的技术方案，其原理是：

1. 利用 `<script>` 标签不受同源策略限制的特点
2. 动态创建 `<script>` 标签，src 属性指向跨域 API
3. 服务器返回一个函数调用，将数据作为参数传入
4. 客户端预先定义这个函数，处理返回的数据

### 各平台支持情况

| 平台 | 实现方式 | 是否支持原生JSONP | 说明 |
|------|----------|------------------|------|
| **H5** | 标准JSONP | ✅ 是 | JSONP原生工作环境，所有API均可用 |
| **微信小程序** | uni.request替代 | ❌ 否 | 缺少document和window对象 |
| **支付宝小程序** | uni.request替代 | ❌ 否 | 缺少document和window对象 |
| **百度小程序** | uni.request替代 | ❌ 否 | 缺少document和window对象 |
| **字节跳动小程序** | uni.request替代 | ❌ 否 | 缺少document和window对象 |
| **QQ小程序** | uni.request替代 | ❌ 否 | 缺少document和window对象 |
| **快应用** | fetch或其他API | ❌ 否 | 缺少必要的Web API |
| **App (iOS/Android)** | HTML5+ XMLHttpRequest | ⚠️ 部分支持 | Webview环境下可用，需注意安全策略 |

## 统一JSONP助手

项目提供了一个统一的跨平台JSONP助手 (`utils/jsonp-helper.js`)，自动处理所有平台的兼容性问题。

### 主要特性

- 跨平台兼容：自动检测运行平台并选择最适合的JSONP实现方案
- 基于 Promise 的异步封装
- 自动生成唯一回调函数名
- 支持超时处理（默认 10 秒）
- 完善的错误处理机制
- 自动清理资源，防止内存泄漏
- 调试模式支持

### 使用方法

```javascript
import JsonpHelper from '@/utils/jsonp-helper.js';

// 基本用法 - 自动选择平台最佳方案
try {
  const result = await JsonpHelper(
    'https://example.com/api',     // API 地址
    { param1: 'value1' },         // 请求参数
    {                              // 选项对象
      timeout: 5000,               // 可选，超时时间（毫秒）
      callbackName: 'myCallback', // 可选，回调函数名前缀（H5平台有效）
      debug: true                  // 可选，是否输出调试信息
    }
  );
  console.log('获取的数据:', result);
} catch (error) {
  console.error('请求失败:', error);
}

// 获取平台信息
import { getPlatformInfo, isSupportJsonp } from '@/utils/jsonp-helper.js';

const platformInfo = getPlatformInfo();
console.log(`当前平台: ${platformInfo.platform}`);
console.log(`实现方式: ${platformInfo.recommendedMethod}`);

if (isSupportJsonp()) {
  console.log('当前平台支持原生JSONP');
} else {
  console.log('当前平台使用替代方案');
}
```

### 使用示例

```javascript
// 示例1：基本请求
const data = await JsonpHelper('https://api.example.com/data', { id: 123 });

// 示例2：带调试信息
const weather = await JsonpHelper('https://api.weather.com', { city: '北京' }, { debug: true });

// 示例3：自定义超时
const result = await JsonpHelper('https://api.example.com/slow', {}, { timeout: 15000 });
```

## 演示功能

### 1. 节假日查询

通过调用 `https://tool.bitefu.net/jiari/` API 查询指定日期的节假日信息，用户可以选择日期并查看结果。

### 2. 天气查询

调用天气查询 API 获取指定城市的天气信息，展示了 JSONP 在获取实时数据方面的应用。

### 3. IP 地址查询

获取当前客户端的 IP 地址信息，演示了简单的数据查询场景。

## 安装与运行

### 前置要求

- [Node.js](https://nodejs.org/) (推荐 v14+)
- [HBuilderX](https://www.dcloud.io/hbuilderx.html) 或 [uni-app CLI](https://uniapp.dcloud.io/collocation/cli)

### 安装步骤

1. 克隆项目到本地

```bash
git clone https://gitee.com/web/uni_jsonp.git
cd uni_jsonp/JSONP
```

2. 安装依赖（如果使用 CLI 方式）

```bash
npm install
# 或
yarn install
```

3. 运行项目

- **H5（推荐）**：
  ```bash
  npm run dev:h5          # 运行到浏览器
  ```
  或使用HBuilderX：直接打开项目，点击"运行" → "运行到浏览器"

- **小程序**：
  ```bash
  npm run dev:mp-weixin   # 运行到微信小程序
  ```
  **注意**：项目中的统一JSONP助手会自动适配小程序平台，使用uni.request作为替代方案

- **App**：
  ```bash
  npm run dev:app-plus    # 运行到 App
  ```
  **注意**：项目中的统一JSONP助手会自动使用HTML5+ API实现JSONP功能

### 平台特定配置

1. **H5平台**：
   - 无需任何额外配置
   - 自动使用标准JSONP实现

2. **小程序平台**：
   - 无需任何额外配置
   - 自动使用uni.request作为替代方案

3. **App平台**：
   - 需要在manifest.json中添加网络权限：

```json
"app-plus": {
  "modules": {},
  "distribute": {
    "android": {
      "permissions": [
        "<uses-permission android:name=\"android.permission.INTERNET\"/>"
      ]
    }
  }
}
```

> **重要提示**：本项目的统一JSONP助手已自动处理了所有平台的兼容性问题，无需开发者进行额外配置或适配代码。

## App平台JSONP替代方案原理

由于App平台中对Web API的限制，无法直接使用标准JSONP方案，但可以通过以下方式实现类似功能：

### 方法1：HTML5+ XMLHttpRequest API（推荐）
- **原理**：使用HTML5+扩展的XMLHttpRequest对象，它没有同源策略限制
- **优势**：实现简单，性能好，不需要额外的WebView
- **限制**：需要服务端返回标准JSONP格式数据，客户端需要额外解析

### 方法2：隐藏的WebView执行JSONP
- **原理**：创建一个隐藏的WebView组件，在WebView中执行标准JSONP代码
- **优势**：完全模拟浏览器环境，可以执行标准JSONP
- **限制**：资源消耗较大，实现复杂，需要处理WebView生命周期

### 方法3：代理服务器方案
- **原理**：通过自己的服务器转发请求，服务器端处理跨域问题
- **优势**：完全兼容所有平台，安全性高
- **限制**：需要额外的服务器资源，增加了网络请求延迟

### 各方案对比

| 方案 | 实现难度 | 性能 | 资源消耗 | 兼容性 | 推荐度 |
|------|----------|------|----------|--------|--------|
| HTML5+ XMLHttpRequest | 低 | 高 | 低 | App平台 | ⭐⭐⭐⭐⭐ |
| 隐藏WebView | 高 | 中 | 高 | App平台 | ⭐⭐⭐ |
| 代理服务器 | 中 | 中 | 中 | 所有平台 | ⭐⭐⭐⭐ |
| 标准JSONP | 低 | 高 | 低 | 仅H5 | ⭐⭐⭐⭐⭐ (H5) |

## 注意事项

### JSONP 技术限制

- JSONP 只支持 GET 请求，不支持 POST 等其他 HTTP 方法
- 需要服务器端支持 JSONP 格式返回
- 存在安全风险，只适用于可信的数据源
- 相比 CORS，JSONP 是一种较为古老的解决方案

### 平台兼容性限制

- **H5平台**：完全兼容，推荐使用
- **小程序平台**：不支持，因为缺少document和window对象
- **App平台**：部分兼容，在Webview环境下可能受限
- **快应用平台**：不支持，缺少必要的Web API

### 替代方案

对于不支持JSONP的平台，建议使用以下替代方案：

1. **uni.request** - uni-app提供的跨平台网络请求API
2. **服务器代理** - 通过自己的服务器转发请求
3. **CORS** - 如果服务端支持，优先使用现代CORS方案

### 安全建议

- 不要使用JSONP请求敏感数据
- 对返回的数据进行验证和过滤
- 限制请求超时时间，防止长时间阻塞
- 在生产环境中考虑使用更安全的跨域方案

## 许可证

本项目采用 MIT 许可证，详情请参阅 [LICENSE](LICENSE) 文件。