mcpField
U
uniappx-uview-pro

uniappx-uview-pro

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

关于 uniappx-uview-pro

面向 UniAppX 开发者的 uView Pro 集成技能，涵盖项目配置、组件接入和跨平台差异。提供配置参考与模板，重点不在 uView Pro API 文档。

主要功能

  1. 01配置 pages.json 与 manifest.json
  2. 02设置 easycom 自动导入组件
  3. 03集成导航、路由与 UniAppX API
  4. 04处理 H5、小程序、App 和 nvue 差异
  5. 05主题定制、构建优化与多平台部署

适用场景

  1. 01在 UniAppX 项目中接入 uView Pro
  2. 02为目标平台配置项目和组件导入
  3. 03排查导航或平台特定行为
  4. 04优化并部署多平台应用

安装

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

$npx skills add https://github.com/full-stack-skills/uniapp-skills --skill uniappx-uview-pro

安装后在 Claude Code 中输入/uniappx-uview-pro确认已加载。

包含的文件

除 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
uniappx-api.md
examples/platform-specific/
app.md
h5.md
miniprogram.md
nvue.md
templates/
basic-uniappx-project.md
manifest-template.md
pages-template.md

详细介绍

何时使用此技能

当用户想要执行以下操作时，请使用此技能：

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

如何使用此技能

此技能按照 UniAppX 集成模式和官方 UniAppX 插件结构（https://ext.dcloud.net.cn/plugin?id=24633）进行组织。使用 uView Pro 配合 UniAppX 时：

  1. 安装和设置 UniAppX 项目中的 uView Pro：

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

  2. 与 UniAppX 功能集成：

    • 加载 examples/integration/pages-config.md，了解 pages.json 配置
    • 加载 examples/integration/manifest-config.md，了解 manifest.json 配置
    • 加载 examples/integration/navigation.md，了解如何使用 uView Pro 进行导航
    • 加载 examples/integration/uniappx-api.md，了解如何将 UniAppX API 与 uView Pro 配合使用

  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，了解如何在 UniAppX 中自定义主题
    • 加载 examples/advanced/build-optimization.md，了解构建优化
    • 加载 examples/advanced/multi-platform.md，了解多平台部署

  5. 需要时参考 API 文档：

    • api/integration-api.md - UniAppX 与 uView Pro 集成 API
    • api/config-api.md - 配置 API 参考

  6. 使用模板快速开始：

    • templates/basic-uniappx-project.md - 集成 uView Pro 的基础 UniAppX 项目
    • templates/pages-template.md - Pages 配置模板
    • templates/manifest-template.md - Manifest 配置模板

重要说明：

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

示例和模板

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

API 参考

  • 集成 API：api/integration-api.md - UniAppX 与 uView Pro 集成 API 参考
  • 配置 API：api/config-api.md - UniAppX 项目的配置 API 参考

最佳实践

  1. 使用 easycom：在 pages.json 中配置 easycom，以自动导入 uView Pro 组件
  2. 平台测试：部署前在所有目标平台（H5、小程序、App）上进行测试
  3. 使用 rpx 单位：在 UniAppX 中使用 rpx 实现响应式尺寸，使用 px 设置固定尺寸
  4. SCSS 支持：确保在 UniAppX 项目中正确配置 SCSS
  5. Manifest 配置：为各个平台正确配置 manifest.json
  6. 条件编译：使用条件编译（#ifdef、#endif）编写平台专属代码
  7. 性能：针对各个平台的具体要求进行优化
  8. TypeScript：使用 TypeScript（.uts 文件）和适当的类型定义
  9. 组合式 API：使用组合式 API 和 setup 语法（推荐用于 UniAppX）
  10. 生命周期管理：使用 uView Pro 组件时，正确处理 UniAppX 页面生命周期

资源

关键词

uniappx, uniapp-x, uview-pro, uview pro, uniappx 集成, uniappx 配置, easycom, pages.json, manifest.json, uni-app-x, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异, TypeScript, Composition API, setup 语法, .uts 文件, UniAppX 组件, 跨平台组件, 小程序组件, App 组件

评论

支持 Markdown