更新记录

1.0（2025-11-26） 下载此版本

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

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

平台兼容性

uni-app(3.6.14)

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助手

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

主要特性

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

使用方法

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('当前平台使用替代方案');
}

使用示例

// 示例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 (推荐 v14+)
• HBuilderX 或 uni-app CLI

安装步骤

1. 克隆项目到本地

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

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

npm install
# 或
yarn install

3. 运行项目

• H5（推荐）：

  npm run dev:h5          # 运行到浏览器

  或使用HBuilderX：直接打开项目，点击"运行" → "运行到浏览器"

• 小程序：

  npm run dev:mp-weixin   # 运行到微信小程序

  注意：项目中的统一JSONP助手会自动适配小程序平台，使用uni.request作为替代方案

• App：

  npm run dev:app-plus    # 运行到 App

  注意：项目中的统一JSONP助手会自动使用HTML5+ API实现JSONP功能

平台特定配置

1. H5平台：

   • 无需任何额外配置
   • 自动使用标准JSONP实现

2. 小程序平台：

   • 无需任何额外配置
   • 自动使用uni.request作为替代方案

3. App平台：

   • 需要在manifest.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：代理服务器方案

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

各方案对比

注意事项

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 文件。