mcpField
U
uniapp-ucharts

uniapp-ucharts

github.com/full-stack-skills开发11116 次安装4 周前更新
代码仓库

关于 uniapp-ucharts

uniapp-ucharts 是将 uCharts 图表集成到 UniApp 项目的文档技能，侧重项目设置、配置和平台差异，而非 uCharts API 本身。

主要功能

  1. 01UniApp 安装与项目设置
  2. 02easycom 和项目配置
  3. 03导航与 UniApp API 集成
  4. 04H5、小程序、App 和 nvue 指引
  5. 05主题、构建优化与部署模板

适用场景

  1. 01在 UniApp 项目中接入 uCharts
  2. 02配置 pages.json 和 manifest.json
  3. 03适配目标平台的图表行为
  4. 04准备跨平台图表部署

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/full-stack-skills/uniapp-skills --skill uniapp-ucharts

安装后在 Claude Code 中输入/uniapp-ucharts确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

LICENSE.txt
agents/
openai.yaml
api/
config-api.md
integration-api.md
examples/advanced/
build-optimization.md
custom-theme.md
multi-platform.md
examples/getting-started/
easycom-config.md
installation.md
project-setup.md
examples/integration/
manifest-config.md
navigation.md
pages-config.md
uni-api.md
examples/platform-specific/
app.md
h5.md
miniprogram.md
nvue.md
templates/
basic-uniapp-project.md
manifest-template.md
pages-template.md

详细介绍

何时使用此技能

当用户希望进行以下操作时，请使用此技能：

  • 将 uCharts 集成到 UniApp 项目中
  • 配置 UniApp 项目以使用 uCharts（pages.json、manifest.json、easycom）
  • 处理在 UniApp 中使用 uCharts 时的平台特定行为（H5、小程序、App、nvue）
  • 在 uCharts 组件中使用 UniApp 功能（导航、API、生命周期）
  • 使用 uCharts 图表构建跨平台 UniApp 应用
  • 配置 easycom，以便在 UniApp 中自动导入 uCharts 组件
  • 在 UniApp 中使用 uCharts 处理导航和路由
  • 使用 uCharts 优化 UniApp 项目
  • 将基于 uCharts 的 UniApp 应用部署到多个平台

如何使用此技能

此技能按照 UniApp 集成模式和官方 UniApp 插件结构（https://ext.dcloud.net.cn/plugin?id=271）组织。在 UniApp 中使用 uCharts 时：

  1. 安装和设置 UniApp 中的 uCharts：

    • 加载 examples/getting-started/installation.md，了解如何在 UniApp 中安装
    • 加载 examples/getting-started/project-setup.md，了解 UniApp 项目配置
    • 加载 examples/getting-started/easycom-config.md，了解 easycom 配置

  2. 与 UniApp 功能集成：

    • 加载 examples/integration/pages-config.md，了解 pages.json 配置
    • 加载 examples/integration/manifest-config.md，了解 manifest.json 配置
    • 加载 examples/integration/navigation.md，了解如何使用 uCharts 进行导航
    • 加载 examples/integration/uni-api.md，了解如何将 UniApp API 与 uCharts 搭配使用

  3. 处理平台特定行为：

    • 加载 examples/platform-specific/h5.md，了解 H5 平台注意事项
    • 加载 examples/platform-specific/miniprogram.md，了解小程序注意事项
    • 加载 examples/platform-specific/app.md，了解 App 平台注意事项
    • 加载 examples/platform-specific/nvue.md，了解 nvue 注意事项

  4. 高级集成：

    • 加载 examples/advanced/custom-theme.md，了解如何在 UniApp 中自定义主题
    • 加载 examples/advanced/build-optimization.md，了解构建优化
    • 加载 examples/advanced/multi-platform.md，了解多平台部署

  5. 按需参考 API 文档：

    • api/integration-api.md - UniApp 与 uCharts 集成 API
    • api/config-api.md - 配置 API 参考

  6. 使用模板快速入门：

    • templates/basic-uniapp-project.md - 使用 uCharts 的基础 UniApp 项目
    • templates/pages-template.md - 页面配置模板
    • templates/manifest-template.md - Manifest 配置模板

重要说明：

  • 此技能专注于 UniApp 集成，而非 uCharts API 文档
  • 始终在 pages.json 中配置 easycom，以便自动导入组件
  • 使用条件编译（#ifdef、#endif）编写平台特定代码
  • 部署前在所有目标平台（H5、小程序、App）上进行测试
  • 在 UniApp 中使用 rpx 单位实现响应式尺寸

示例和模板

入门
  • 安装：examples/getting-started/installation.md - 如何在 UniApp 项目中安装 uCharts
  • 项目设置：examples/getting-started/project-setup.md - 设置使用 uCharts 的 UniApp 项目
  • Easycom 配置：examples/getting-started/easycom-config.md - 配置 easycom 以自动导入组件
集成
  • 页面配置：examples/integration/pages-config.md - 配置搭配 uCharts 使用的 pages.json
  • Manifest 配置：examples/integration/manifest-config.md - 配置供 uCharts 使用的 manifest.json
  • 导航：examples/integration/navigation.md - 使用 uCharts 进行导航和路由
  • UniApp API：examples/integration/uni-api.md - 在 uCharts 组件中使用 UniApp API
特定平台
  • H5：examples/platform-specific/h5.md - 使用 uCharts 时的 H5 平台注意事项
  • 小程序：examples/platform-specific/miniprogram.md - 使用 uCharts 时的小程序注意事项
  • App：examples/platform-specific/app.md - 使用 uCharts 时的 App 平台注意事项
  • nvue：examples/platform-specific/nvue.md - 使用 uCharts 时的 nvue 注意事项
高级主题
  • 自定义主题：examples/advanced/custom-theme.md - 在 UniApp 项目中自定义主题
  • 构建优化：examples/advanced/build-optimization.md - 使用 uCharts 优化 UniApp 构建
  • 多平台：examples/advanced/multi-platform.md - 多平台部署策略
模板
  • 基础项目：templates/basic-uniapp-project.md - 使用 uCharts 的基础 UniApp 项目结构
  • 页面模板：templates/pages-template.md - pages.json 配置模板
  • Manifest 模板：templates/manifest-template.md - manifest.json 配置模板

API 参考

  • 集成 API：api/integration-api.md - UniApp 和 uCharts 集成 API 参考
  • 配置 API：api/config-api.md - UniApp 项目的配置 API 参考

最佳实践

  1. 使用 easycom：在 pages.json 中配置 easycom，以自动导入 uCharts 组件
  2. 平台测试：部署前在所有目标平台（H5、小程序、App）上进行测试
  3. 使用 rpx 单位：在 UniApp 中使用 rpx 实现响应式尺寸，使用 px 设置固定尺寸
  4. Canvas 支持：确保目标平台正确支持 canvas
  5. Manifest 配置：为每个平台正确配置 manifest.json
  6. 条件编译：使用条件编译（#ifdef、#endif）编写特定平台的代码
  7. 性能：针对每个平台的具体要求进行优化
  8. 数据格式：确保数据格式符合 uCharts 的要求
  9. 生命周期管理：正确处理 UniApp 页面生命周期中的 uCharts 实例
  10. 内存管理：在 onUnload 生命周期中清理图表实例

资源

关键词

uniapp，ucharts，uniapp 图表，uniapp 集成，uniapp 配置，easycom，pages.json，manifest.json，uni-app，小程序，跨平台，H5，App，nvue，条件编译，平台差异，图表，canvas，图表组件，UniApp 图表，跨平台图表，小程序图表，App 图表

评论

支持 Markdown