NutUI组件库信息抓取工具

这是一个用于抓取NutUI组件库所有组件信息的Python脚本，可以批量获取组件的name、title、props、topic_style信息，并输出为JSON格式。

功能特性

• ✅ 自动获取NutUI网站左侧所有组件列表
• ✅ 批量抓取每个组件的详细信息
• ✅ 解析组件属性表格（Props）
• ✅ 提取事件和插槽信息
• ✅ 抓取主题定制样式变量
• ✅ 智能容错处理
• ✅ 输出结构化JSON数据

环境要求

• Python 3.6+
• 网络连接

安装依赖

pip install -r requirements.txt

或者手动安装：

pip install requests beautifulsoup4 lxml

使用方法

1. 直接运行脚本

python nutui_scraper.py

2. 在Python代码中使用

from nutui_scraper import NutUIComponentScraper

# 创建爬虫实例
scraper = NutUIComponentScraper()

# 抓取所有组件信息
components_data = scraper.scrape_all_components()

# 保存到JSON文件
scraper.save_to_json(components_data, "my_components.json")

3. 自定义配置

# 使用自定义URL
scraper = NutUIComponentScraper(
    base_url="https://nutui.jd.com/taro/react/3x/#/zh-CN/component/"
)

# 只抓取特定组件
specific_components = ['Button', 'Input', 'Form']
for component in specific_components:
    info = scraper.extract_component_info(component)
    print(info)

输出格式

生成的JSON文件包含以下结构：

[
  {
    "name": "Button",
    "title": "按钮用于触发一个操作，如提交表单。",
    "props": {
      "description": "组件属性配置",
      "properties": [
        {
          "name": "type",
          "type": "string",
          "default": "default",
          "description": "按钮类型",
          "options": ["default", "primary", "success"]
        }
      ],
      "events": [
        {
          "name": "click",
          "description": "点击按钮时触发",
          "params": "event: MouseEvent"
        }
      ],
      "slots": [
        {
          "name": "default",
          "description": "按钮内容"
        }
      ]
    },
    "topic_style": {
      "description": "组件主题定制-样式变量",
      "css_variables": [
        {
          "name": "--nut-button-border-radius",
          "default": "25px",
          "description": "按钮圆角"
        }
      ]
    }
  }
]

主要功能模块

1. 组件列表获取

• 自动从NutUI网站左侧导航栏提取组件列表
• 支持多种选择器策略
• 提供预定义组件列表作为后备方案

2. 组件信息抓取

• name: 组件名称
• title: 组件描述和用途
• props: 属性配置（包括properties、events、slots）
• topic_style: 主题定制样式变量

3. 表格数据解析

• 智能识别属性表格、事件表格、插槽表格
• 自动解析表格结构和数据
• 支持CSS变量提取

4. 容错处理

• 网络请求重试机制
• 解析失败时的错误处理
• 多种选择器策略兜底

配置选项

请求延时

默认每个组件请求间隔1秒，避免请求过于频繁：

# 在 scrape_all_components() 方法中
time.sleep(1)  # 可以调整这个值

User-Agent

脚本使用Chrome浏览器的User-Agent，如需修改：

self.session.headers.update({
    'User-Agent': 'your-custom-user-agent'
})

注意事项

1. 网络连接: 确保能正常访问nutui.jd.com
2. 请求频率: 脚本已内置请求延时，避免对服务器造成压力
3. 数据准确性: 由于网页结构可能变化，建议定期更新脚本
4. 编码问题: 输出的JSON文件使用UTF-8编码

常见问题

Q1: 运行时出现网络错误

A: 检查网络连接，确保能访问NutUI官网。如果网络正常但仍有问题，可能是网站结构发生了变化。

Q2: 某些组件信息抓取失败

A: 脚本会显示具体的失败原因。通常是由于：

• 网页结构与预期不符
• 组件页面不存在
• 网络超时

Q3: 如何添加新的组件

A: 修改 get_predefined_components() 方法中的组件列表，或者让脚本自动从网页中发现新组件。

Q4: 输出的数据格式不符合预期

A: 可以修改对应的解析方法：

• extract_title(): 修改标题提取逻辑
• parse_props_table(): 修改属性表格解析
• parse_css_vars_table(): 修改样式变量提取

示例输出文件

运行脚本后会生成 nutui_components.json 文件，包含所有组件的详细信息。

开发说明

如需扩展功能或修改抓取逻辑，主要关注以下方法：

• get_component_list(): 获取组件列表的逻辑
• extract_component_info(): 单个组件信息提取的入口
• extract_props(): 属性信息提取
• extract_topic_style(): 样式变量提取

License

本工具仅用于学习和研究目的，请遵守网站的使用条款。