使用React批量请求检查微信小程序是否被封禁

概述：

本文展示了如何使用React编写一个批量请求小程序API的示例，检查多个微信小程序的封禁状态。我们将请求接口 https://api.52an.fun/xcx/checkxcx.php?appid= 并根据返回的code和status值，判断小程序是否被封禁。code为1时表示小程序正常，code为0时表示小程序被封禁。

目标：

通过React创建一个界面，可以批量输入多个微信小程序的appid，然后请求接口并显示它们的状态。

环境要求：

• React开发环境。
• axios库用于发送HTTP请求。

React代码示例：

1. 安装依赖：

首先，确保你已经安装了axios库，使用以下命令安装：

npm install axios

2. 创建React组件代码：

import React, { useState } from 'react';
import axios from 'axios';

function App() {
  const [appIds, setAppIds] = useState([]);
  const [results, setResults] = useState([]);

  // 处理输入框的变更
  const handleAppIdChange = (event) => {
    setAppIds(event.target.value.split('\n').map((line) => line.trim()));
  };

  // 批量请求微信小程序状态
  const checkStatus = async () => {
    const result = [];

    for (const appid of appIds) {
      try {
        const response = await axios.get(`https://api.52an.fun/xcx/checkxcx.php?appid=${appid}`);
        const { code, appid: appidResponse, status } = response.data;

        result.push({
          appid: appidResponse,
          status: code === 1 ? '正常' : `被封禁，原因: ${status}`,
        });
      } catch (error) {
        result.push({
          appid: appid,
          status: '请求失败，请检查APPID',
        });
      }
    }

    setResults(result);
  };

  return (
    <div className="App">
      <h1>微信小程序封禁检查</h1>

      <textarea
        rows="10"
        cols="30"
        placeholder="请输入多个微信小程序的APPID，每个APPID一行"
        onChange={handleAppIdChange}
      ></textarea>

      <br />
      <button onClick={checkStatus}>检查状态</button>

      <div>
        <h3>检查结果:</h3>
        {results.length > 0 && (
          <ul>
            {results.map((result, index) => (
              <li key={index}>
                <strong>{result.appid}</strong>: {result.status}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
}

export default App;

代码解析：

1. 状态管理：

   • appIds：存储输入的APPID列表。
   • results：存储检查结果，显示每个小程序的状态。
2. handleAppIdChange：该函数处理输入框中的内容，将用户输入的多个APPID按行分隔并存储在appIds中。

3. checkStatus：该函数负责发送批量请求。我们使用axios.get逐个请求每个小程序的appid，并根据返回的code值判断小程序的状态：

   • code为1时表示小程序正常。
   • code为0时表示小程序被封禁，返回封禁的原因。

4. 结果展示：

   • 通过results数组，将每个小程序的appid和其封禁状态显示在页面上。

示例操作：

1. 用户在文本框中输入多个微信小程序的appid，每个appid单独一行。
2. 点击“检查状态”按钮后，系统会依次请求每个appid的封禁状态，并显示结果。
3. 显示的结果包括每个小程序的appid以及对应的封禁状态。

依赖安装：

如果没有安装React开发环境，可以使用create-react-app工具来创建一个新的React应用：

npx create-react-app check-wechat-status
cd check-wechat-status
npm install axios

编译与运行：

1. 运行React开发环境：

   npm start

2. 打开浏览器，进入http://localhost:3000，就可以看到界面，输入appid并查看状态。

结果示例：

如果输入了多个微信小程序的appid，比如：

wx81894c6dbb81c2e2
wx1234567890abcdef

结果可能会显示：

检查结果:
- wx81894c6dbb81c2e2: 被封禁，原因: 存在绕开、规避或对抗平台审核监管的行为
- wx1234567890abcdef: 正常

总结：

通过React和axios，我们可以批量检查多个微信小程序是否被封禁。用户只需要在输入框中输入多个appid，点击按钮即可批量查询，并看到每个小程序的状态。这种方法不仅方便，还可以快速查看多个小程序的状态，有助于管理多个微信小程序。