uniapp-uview

何时使用此技能

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

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

如何使用此技能

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

1. 安装并设置 UniApp 项目中的 uView UI：

   • 加载 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，了解如何使用 uView 进行导航
   • 加载 examples/integration/uni-api.md，了解如何将 UniApp API 与 uView 搭配使用

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 与 uView 集成 API
   • api/config-api.md - 配置 API 参考

6. 使用模板快速入门：

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

重要说明：

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

示例和模板

入门

• 安装：examples/getting-started/installation.md - 如何在 UniApp 项目中安装 uView UI
• 项目设置：examples/getting-started/project-setup.md - 使用 uView 设置 UniApp 项目
• Easycom 配置：examples/getting-started/easycom-config.md - 配置 easycom 以自动导入组件

集成

• Pages 配置：examples/integration/pages-config.md - 配置 pages.json 以搭配 uView 使用
• Manifest 配置：examples/integration/manifest-config.md - 为 uView 配置 manifest.json
• 导航：examples/integration/navigation.md - 使用 uView 进行导航和路由
• UniApp API：examples/integration/uni-api.md - 将 UniApp API 与 uView 组件搭配使用

特定平台

• H5：examples/platform-specific/h5.md - 使用 uView 时的 H5 平台注意事项
• 小程序：examples/platform-specific/miniprogram.md - 使用 uView 时的小程序注意事项
• App：examples/platform-specific/app.md - 使用 uView 时的 App 平台注意事项
• nvue：examples/platform-specific/nvue.md - 使用 uView 时的 nvue 注意事项

高级

• 自定义主题：examples/advanced/custom-theme.md - 在 UniApp 项目中自定义主题
• 构建优化：examples/advanced/build-optimization.md - 使用 uView 优化 UniApp 构建
• 多平台：examples/advanced/multi-platform.md - 多平台部署策略

模板

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

API 参考

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

最佳实践

1. 使用 easycom：在 pages.json 中配置 easycom，以自动导入 uView 组件
2. 平台测试：在所有目标平台（H5、小程序、App）上进行测试
3. 使用 rpx 单位：在 UniApp 中使用 rpx 实现响应式尺寸，使用 px 设置固定尺寸
4. SCSS 支持：确保在 UniApp 项目中正确配置 SCSS
5. Manifest 配置：为每个平台正确配置 manifest.json
6. 条件编译：使用条件编译处理特定平台的代码
7. 性能：针对各平台的具体要求进行优化
8. 导航：在 uView 组件中使用 UniApp 导航 API

资源

• 官方插件：https://ext.dcloud.net.cn/plugin?id=1593
• UniApp 文档：https://uniapp.dcloud.net.cn/
• uView UI：https://www.uviewui.com/

关键词

uniapp、uview、uview-ui、uniapp 集成、uniapp 配置、easycom、pages.json、manifest.json、uni-app、小程序、跨平台、H5、App、nvue、条件编译、平台差异