home / skills / partme-ai / full-stack-skills / uniappx-uview-pro

uniappx-uview-pro skill

safe

/skills/uniappx-uview-pro

This skill guides you to seamlessly integrate and optimize uView Pro within UniAppX projects across platforms.

npx playbooks add skill partme-ai/full-stack-skills --skill uniappx-uview-pro

Review the files below or copy the command above to add this skill to your agents.

Files (21)

SKILL.md

6.9 KB

---
name: uniappx-uview-pro
description: A comprehensive skill for integrating and using uView Pro with UniAppX projects. This skill focuses on UniAppX-specific integration, configuration, and platform-specific considerations when using uView Pro in UniAppX applications. Use this skill whenever the user needs to integrate uView Pro into UniAppX projects, configure UniAppX-specific settings, or handle platform differences.
license: Complete terms in LICENSE.txt
---

## 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

## 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:

1. **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

2. **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

3. **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

4. **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

5. **Reference the API documentation** when needed:
   - `api/integration-api.md` - UniAppX and uView Pro integration API
   - `api/config-api.md` - Configuration API reference

6. **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

## 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

### 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

### 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

### 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

### 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

## API Reference

- **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

## Best Practices

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

## 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/

## 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 组件

Overview

This skill provides practical guidance and templates for integrating uView Pro into UniAppX projects. It focuses on UniAppX-specific configuration, platform differences, and common integration patterns to get uView Pro running reliably across H5, mini-program, App, and nvue targets. Use it when you need step-by-step setup, easycom configuration, or platform-specific adjustments.

How this skill works

The skill maps UniAppX integration steps to concrete files and examples, including installation, pages.json, manifest.json, and easycom configuration. It points to platform-specific notes and templates for H5, mini-program, App, and nvue. It also includes advanced topics like theme customization, build optimization, and multi-platform deployment patterns.

When to use it

When adding uView Pro components to a new or existing UniAppX project
When configuring easycom for automatic component imports in UniAppX
When adjusting pages.json, manifest.json, or navigation to work with uView Pro
When handling platform-specific behavior (H5, mini-program, App, nvue)
When optimizing builds, themes, or multi-platform deployments with uView Pro

Best practices

Configure easycom in pages.json to avoid manual imports for uView Pro components
Use conditional compilation (#ifdef / #endif) to separate platform-specific code paths
Prefer rpx units for responsive layouts and px for fixed-size elements
Use TypeScript (.uts) and Composition API (setup syntax) for maintainability
Test UI and navigation flows on each target platform before release

Example use cases

Quick-start template for a UniAppX project preconfigured with uView Pro and easycom
Pages.json and manifest.json templates for multi-platform routing and permissions
Platform-specific tweaks: H5 scroll behavior, mini-program component fixes, App native bridging
Custom theme creation using SCSS variables and uView Pro theming examples
Build optimization steps to reduce bundle size when using uView Pro components

FAQ

Do I need to import uView Pro components manually?

No. Configure easycom in pages.json to enable automatic resolution and avoid manual imports.

How do I handle platform-specific code?

Use conditional compilation (#ifdef / #endif) and maintain small platform-specific modules for each target.