uniappx-uview-pro

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

当用户需要以下操作时，可使用本指南：

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

How to use this skill

如何使用本指南

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

Install and setup uView Pro in UniAppX project:
- Load
```
examples/getting-started/installation.md
```
  for installation in UniAppX
- Load
```
examples/getting-started/project-setup.md
```
  for UniAppX project configuration
- Load
```
examples/getting-started/easycom-config.md
```
  for easycom configuration
Integrate with UniAppX 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 Pro
- Load
```
examples/integration/uniappx-api.md
```
  for using UniAppX APIs with uView Pro
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 UniAppX
- 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
```
  - UniAppX and uView Pro integration API
- ```
api/config-api.md
```
  - Configuration API reference
Use templates for quick start:
- ```
templates/basic-uniappx-project.md
```
  - Basic UniAppX project with uView Pro
- ```
templates/pages-template.md
```
  - Pages configuration template
- ```
templates/manifest-template.md
```
  - Manifest configuration template

Important Notes:

This skill focuses on UniAppX integration, not uView Pro API documentation
UniAppX uses TypeScript (.uts files) and Composition API (setup 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 UniAppX

本指南的结构与UniAppX集成模式及官方UniAppX插件结构（https://ext.dcloud.net.cn/plugin?id=24633）保持一致。在UniAppX中使用uView Pro时：

在UniAppX项目中安装和配置 uView Pro：
- 查看
```
examples/getting-started/installation.md
```
  了解UniAppX中的安装步骤
- 查看
```
examples/getting-started/project-setup.md
```
  了解UniAppX项目配置方法
- 查看
```
examples/getting-started/easycom-config.md
```
  了解easycom配置方式
与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
```
  了解如何结合uView Pro组件使用UniAppX 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
```
  了解UniAppX项目中的主题定制
- 查看
```
examples/advanced/build-optimization.md
```
  了解构建优化方法
- 查看
```
examples/advanced/multi-platform.md
```
  了解多平台部署策略
必要时参考API文档：
- ```
api/integration-api.md
```
  - UniAppX与uView Pro集成API参考
- ```
api/config-api.md
```
  - 配置API参考
使用模板快速上手：
- ```
templates/basic-uniappx-project.md
```
  - 集成uView Pro的基础UniAppX项目模板
- ```
templates/pages-template.md
```
  - pages.json配置模板
- ```
templates/manifest-template.md
```
  - manifest.json配置模板

重要说明：

本指南聚焦于UniAppX集成，而非uView Pro API文档
UniAppX使用TypeScript（.uts文件）和Composition API（setup语法）
务必在pages.json中配置easycom以实现组件自动导入
使用条件编译（
```
#ifdef
```
、
```
#endif
```
）编写平台专属代码
部署前需在所有目标平台（H5、小程序、App）进行测试
在UniAppX中使用rpx单位实现响应式布局

Examples and Templates

示例与模板

Getting Started

快速入门

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

安装：
```
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以自动导入组件

Integration

集成指南

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

Pages配置：
```
examples/integration/pages-config.md
```
- 结合uView Pro配置pages.json
Manifest配置：
```
examples/integration/manifest-config.md
```
- 结合uView Pro配置manifest.json
导航实现：
```
examples/integration/navigation.md
```
- 结合uView Pro实现导航与路由
UniAppX API：
```
examples/integration/uniappx-api.md
```
- 结合uView Pro组件使用UniAppX API

Platform-Specific

平台专属适配

H5:
```
examples/platform-specific/h5.md
```
- H5 platform considerations with uView Pro
Mini-Program:
```
examples/platform-specific/miniprogram.md
```
- Mini-program considerations with uView Pro
App:
```
examples/platform-specific/app.md
```
- App platform considerations with uView Pro
nvue:
```
examples/platform-specific/nvue.md
```
- nvue considerations with 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适配注意事项

Advanced

高级功能

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

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

Templates

模板

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

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

API Reference

API参考

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

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

Best Practices

最佳实践

Use easycom: Configure easycom in pages.json for automatic uView Pro component import
Platform Testing: Test on all target platforms (H5, mini-programs, App) before deployment
Use rpx Units: Use rpx for responsive sizing in UniAppX, px for fixed sizes
SCSS Support: Ensure SCSS is properly configured in UniAppX project
Manifest Configuration: Properly configure manifest.json for each platform
Conditional Compilation: Use conditional compilation (
```
#ifdef
```
,
```
#endif
```
) for platform-specific code
Performance: Optimize for each platform's specific requirements
TypeScript: Use TypeScript (.uts files) and proper type definitions
Composition API: Use Composition API and setup syntax (recommended for UniAppX)
Lifecycle Management: Properly handle UniAppX page lifecycle with uView Pro components

使用easycom：在pages.json中配置easycom以自动导入uView Pro组件
平台测试：部署前在所有目标平台（H5、小程序、App）进行测试
使用rpx单位：在UniAppX中使用rpx实现响应式布局，px用于固定尺寸
SCSS支持：确保UniAppX项目已正确配置SCSS
Manifest配置：为每个平台正确配置manifest.json
条件编译：使用条件编译（
```
#ifdef
```
、
```
#endif
```
）编写平台专属代码
性能优化：针对各平台的专属要求进行优化
TypeScript：使用TypeScript（.uts文件）并配置正确的类型定义
Composition API：使用Composition API及setup语法（UniAppX推荐方式）
生命周期管理：结合uView Pro组件正确处理UniAppX页面生命周期

Resources

资源

Official UniAppX Plugin: https://ext.dcloud.net.cn/plugin?id=24633
UniAppX Documentation: https://uniapp.dcloud.net.cn/uni-app-x/
UniAppX API Reference: https://uniapp.dcloud.net.cn/uni-app-x/api/

官方UniAppX插件：https://ext.dcloud.net.cn/plugin?id=24633
UniAppX文档：https://uniapp.dcloud.net.cn/uni-app-x/
UniAppX API参考：https://uniapp.dcloud.net.cn/uni-app-x/api/

Keywords

关键词

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