uniapp-uview

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

When to use this skill

何时使用本技能

Use this skill whenever the user wants to:

Integrate uView UI into UniApp projects
Configure UniApp projects to work with uView UI (pages.json, manifest.json, easycom)
Handle platform-specific behaviors when using uView in UniApp (H5, mini-program, App, nvue)
Use UniApp features (navigation, APIs, lifecycle) with uView components
Build cross-platform UniApp applications with uView UI components
Configure easycom for automatic uView component import in UniApp
Handle navigation and routing with uView in UniApp
Optimize UniApp projects using uView UI
Deploy uView-based UniApp applications to multiple platforms

当用户需要以下操作时，可使用本技能：

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

How to use this skill

如何使用本技能

This skill is organized to match UniApp integration patterns and the official UniApp plugin structure (https://ext.dcloud.net.cn/plugin?id=1593). When working with uView UI in UniApp:

Install and setup uView UI in UniApp project:
- Load
```
examples/getting-started/installation.md
```
  for installation in UniApp
- Load
```
examples/getting-started/project-setup.md
```
  for UniApp project configuration
- Load
```
examples/getting-started/easycom-config.md
```
  for easycom configuration
Integrate with UniApp features:
- Load
```
examples/integration/pages-config.md
```
  for pages.json configuration
- Load
```
examples/integration/manifest-config.md
```
  for manifest.json configuration
- Load
```
examples/integration/navigation.md
```
  for navigation with uView
- Load
```
examples/integration/uni-api.md
```
  for using UniApp APIs with uView
Handle platform-specific behaviors:
- Load
```
examples/platform-specific/h5.md
```
  for H5 platform considerations
- Load
```
examples/platform-specific/miniprogram.md
```
  for mini-program considerations
- Load
```
examples/platform-specific/app.md
```
  for App platform considerations
- Load
```
examples/platform-specific/nvue.md
```
  for nvue considerations
Advanced integration:
- Load
```
examples/advanced/custom-theme.md
```
  for theme customization in UniApp
- Load
```
examples/advanced/build-optimization.md
```
  for build optimization
- Load
```
examples/advanced/multi-platform.md
```
  for multi-platform deployment
Reference the API documentation when needed:
- ```
api/integration-api.md
```
  - UniApp and uView integration API
- ```
api/config-api.md
```
  - Configuration API reference
Use templates for quick start:
- ```
templates/basic-uniapp-project.md
```
  - Basic UniApp project with uView
- ```
templates/pages-template.md
```
  - Pages configuration template
- ```
templates/manifest-template.md
```
  - Manifest configuration template

Important Notes:

This skill focuses on UniApp integration, not uView UI API documentation
uView UI supports both Vue 2 and Vue 3, use appropriate syntax
Always configure easycom in pages.json for automatic component import
Use conditional compilation (
```
#ifdef
```
,
```
#endif
```
) for platform-specific code
Test on all target platforms (H5, mini-programs, App) before deployment
Use rpx units for responsive sizing in UniApp

本技能的组织方式与UniApp集成模式及官方UniApp插件结构（https://ext.dcloud.net.cn/plugin?id=1593）匹配。在UniApp中使用uView UI时：

安装与设置 UniApp项目中的uView UI：
- 加载
```
examples/getting-started/installation.md
```
  获取UniApp中的安装方法
- 加载
```
examples/getting-started/project-setup.md
```
  获取UniApp项目配置指南
- 加载
```
examples/getting-started/easycom-config.md
```
  获取easycom配置方法
与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
```
  获取结合uView组件使用UniApp API的方法
处理平台特定行为：
- 加载
```
examples/platform-specific/h5.md
```
  获取H5平台注意事项
- 加载
```
examples/platform-specific/miniprogram.md
```
  获取小程序平台注意事项
- 加载
```
examples/platform-specific/app.md
```
  获取App平台注意事项
- 加载
```
examples/platform-specific/nvue.md
```
  获取nvue注意事项
高级集成：
- 加载
```
examples/advanced/custom-theme.md
```
  获取UniApp中的主题定制方法
- 加载
```
examples/advanced/build-optimization.md
```
  获取构建优化方法
- 加载
```
examples/advanced/multi-platform.md
```
  获取多平台部署策略
必要时参考API文档：
- ```
api/integration-api.md
```
  - UniApp与uView集成API
- ```
api/config-api.md
```
  - 配置API参考
使用模板快速上手：
- ```
templates/basic-uniapp-project.md
```
  - 集成uView的基础UniApp项目
- ```
templates/pages-template.md
```
  - 页面配置模板
- ```
templates/manifest-template.md
```
  - 清单配置模板

重要说明：

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

Examples and Templates

示例与模板

Getting Started

入门指南

Installation:
```
examples/getting-started/installation.md
```
- How to install uView UI in UniApp projects
Project Setup:
```
examples/getting-started/project-setup.md
```
- Setting up UniApp project with uView
Easycom Config:
```
examples/getting-started/easycom-config.md
```
- Configuring easycom for automatic component import

安装：
```
examples/getting-started/installation.md
```
- 如何在UniApp项目中安装uView UI
项目设置：
```
examples/getting-started/project-setup.md
```
- 配置集成uView的UniApp项目
EasyCom配置：
```
examples/getting-started/easycom-config.md
```
- 配置easycom以自动导入组件

Integration

集成指南

Pages Config:
```
examples/integration/pages-config.md
```
- Configuring pages.json with uView
Manifest Config:
```
examples/integration/manifest-config.md
```
- Configuring manifest.json for uView
Navigation:
```
examples/integration/navigation.md
```
- Navigation and routing with uView
UniApp API:
```
examples/integration/uni-api.md
```
- Using UniApp APIs with uView components

页面配置：
```
examples/integration/pages-config.md
```
- 结合uView配置pages.json
清单配置：
```
examples/integration/manifest-config.md
```
- 为uView配置manifest.json
导航：
```
examples/integration/navigation.md
```
- 结合uView实现导航与路由
UniApp API：
```
examples/integration/uni-api.md
```
- 结合uView组件使用UniApp API

Platform-Specific

平台特定指南

H5:
```
examples/platform-specific/h5.md
```
- H5 platform considerations with uView
Mini-Program:
```
examples/platform-specific/miniprogram.md
```
- Mini-program considerations with uView
App:
```
examples/platform-specific/app.md
```
- App platform considerations with uView
nvue:
```
examples/platform-specific/nvue.md
```
- nvue considerations with uView

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

Advanced

高级集成

Custom Theme:
```
examples/advanced/custom-theme.md
```
- Customizing themes in UniApp projects
Build Optimization:
```
examples/advanced/build-optimization.md
```
- Optimizing UniApp builds with uView
Multi-Platform:
```
examples/advanced/multi-platform.md
```
- Multi-platform deployment strategies

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

Templates

模板

Basic Project:
```
templates/basic-uniapp-project.md
```
- Basic UniApp project structure with uView
Pages Template:
```
templates/pages-template.md
```
- pages.json configuration template
Manifest Template:
```
templates/manifest-template.md
```
- manifest.json configuration template

基础项目：
```
templates/basic-uniapp-project.md
```
- 集成uView的基础UniApp项目结构
页面配置模板：
```
templates/pages-template.md
```
- pages.json配置模板
清单配置模板：
```
templates/manifest-template.md
```
- manifest.json配置模板

API Reference

API参考

Integration API:
```
api/integration-api.md
```
- UniApp and uView integration API reference
Config API:
```
api/config-api.md
```
- Configuration API reference for UniApp projects

集成API：
```
api/integration-api.md
```
- UniApp与uView集成API参考
配置API：
```
api/config-api.md
```
- UniApp项目配置API参考

Best Practices

最佳实践

Use easycom: Configure easycom in pages.json for automatic uView component import
Platform Testing: Test on all target platforms (H5, mini-programs, App)
Use rpx Units: Use rpx for responsive sizing in UniApp, px for fixed sizes
SCSS Support: Ensure SCSS is properly configured in UniApp project
Manifest Configuration: Properly configure manifest.json for each platform
Conditional Compilation: Use conditional compilation for platform-specific code
Performance: Optimize for each platform's specific requirements
Navigation: Use UniApp navigation API with uView components

使用easycom：在pages.json中配置easycom以自动导入uView组件
平台测试：在所有目标平台（H5、小程序、App）进行测试
使用rpx单位：在UniApp中使用rpx实现响应式布局，px用于固定尺寸
SCSS支持：确保UniApp项目已正确配置SCSS支持
清单配置：为每个平台正确配置manifest.json
条件编译：使用条件编译编写平台特定代码
性能优化：针对各平台的特定要求进行优化
导航：结合uView组件使用UniApp导航API

Resources

资源

Official Plugin: https://ext.dcloud.net.cn/plugin?id=1593
UniApp Documentation: https://uniapp.dcloud.net.cn/
uView UI: https://www.uviewui.com/

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

Keywords

关键词

uniapp, uview, uview-ui, uniapp integration, uniapp configuration, easycom, pages.json, manifest.json, uni-app, 小程序, 跨平台, H5, App, nvue, 条件编译, 平台差异

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