Uniappx Uview Pro

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

能力边界

✅ 适用场景

• 当你需要使用此技能对应的技术栈时
• 当项目需要遵循最佳实践时
• 当需要快速上手或深入理解核心概念时

⚠️ 需要注意

• 复杂业务逻辑需要结合具体场景调整
• 性能优化需要根据实际数据量评估

❌ 不适用场景

• 不相关的技术栈或框架
• 需要完全自定义的特殊场景

常见陷阱 (Gotchas)

1. 版本兼容性：注意框架版本与依赖库的兼容性，不同版本 API 可能有差异 2. 配置文件格式：配置文件格式错误是最常见的问题，建议使用编辑器的语法检查 3. 环境变量：确保所有必要的环境变量已正确设置，敏感信息不要硬编码 4. 依赖冲突：多版本共存时注意依赖冲突，使用 lock 文件锁定版本 5. 性能陷阱：大数据量场景下注意性能优化，避免 N+1 查询等常见问题

使用流程

Step 1: 环境准备

确保开发环境已安装必要的依赖和工具。

Step 2: 配置初始化

根据项目需求进行基础配置。

Step 3: 核心功能使用

按照示例代码实现核心功能。

Step 4: 测试验证

运行测试确保功能正常。

Step 5: 部署上线

完成开发后进行部署和监控。

Configuration API | 配置 API

Instructions

This example provides configuration API reference for UniAppX projects with uView Pro.

Key Concepts

• Project configuration
• Build configuration
• Platform configuration
• Component configuration

Project Configuration

// project.config.json (if exists)
{
  "miniprogramRoot": "string",
  "projectname": "string",
  "description": "string",
  "appid": "string"
}

Build Configuration

// manifest.json - Build settings
{
  "h5": {
    "devServer": {
      "port": number,
      "disableHostCheck": boolean
    },
    "router": {
      "mode": "hash" | "history",
      "base": "string"
    },
    "optimization": {
      "treeShaking": {
        "enable": boolean
      }
    }
  },
  "mp-weixin": {
    "setting": {
      "es6": boolean,
      "enhance": boolean,
      "postcss": boolean,
      "minified": boolean
    }
  }
}

Platform Configuration

// manifest.json - Platform settings
{
  "h5": {
    "router": {
      "mode": "hash" | "history"
    }
  },
  "mp-weixin": {
    "appid": "string",
    "setting": {
      "urlCheck": boolean
    }
  },
  "app-plus": {
    "distribute": {
      "android": {
        "permissions": ["string"]
      },
      "ios": {}
    }
  }
}

Component Configuration

<!-- Component usage with configuration -->
<template>
  <u-button 
    type="primary"
    :custom-style="buttonStyle"
    :disabled="isDisabled"
  >
    按钮
  </u-button>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const buttonStyle = ref({
  borderRadius: '20rpx'
})
const isDisabled = ref(false)
</script>

Key Points

• Configure project settings in manifest.json
• Set up build options for each platform
• Configure platform-specific settings
• Use component props for configuration
• Test configuration on all platforms

Integration API | 集成 API

Instructions

This example provides API reference for UniAppX and uView Pro integration.

Key Concepts

• Easycom configuration API
• Pages.json API
• Manifest.json API
• UniAppX API integration

Easycom Configuration API

{
  "easycom": {
    "autoscan": boolean,
    "custom": {
      "^u-(.*)": "string"
    }
  }
}

Pages.json API

{
  "pages": [
    {
      "path": "string",
      "style": {
        "navigationBarTitleText": "string",
        "navigationStyle": "default" | "custom",
        "navigationBarBackgroundColor": "string",
        "navigationBarTextStyle": "black" | "white",
        "enablePullDownRefresh": boolean
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black" | "white",
    "navigationBarTitleText": "string",
    "navigationBarBackgroundColor": "string",
    "backgroundColor": "string"
  }
}

Manifest.json API

{
  "name": "string",
  "appid": "string",
  "versionName": "string",
  "versionCode": "string",
  "transformPx": boolean,
  "app-plus": {
    "usingComponents": boolean,
    "nvueStyleCompiler": "uni-app" | "weex"
  },
  "h5": {
    "router": {
      "mode": "hash" | "history",
      "base": "string"
    }
  },
  "mp-weixin": {
    "appid": "string",
    "setting": {
      "urlCheck": boolean,
      "es6": boolean,
      "enhance": boolean,
      "postcss": boolean,
      "minified": boolean
    },
    "usingComponents": boolean
  }
}

UniAppX API Integration

Navigation API

// Page navigation
uni.navigateTo({
  url: string,
  success?: function,
  fail?: function,
  complete?: function
})

// Page back
uni.navigateBack({
  delta?: number
})

Network Request API

uni.request({
  url: string,
  method?: 'GET' | 'POST' | 'PUT' | 'DELETE',
  data?: object,
  header?: object,
  success?: function,
  fail?: function,
  complete?: function
})

Storage API

// Set storage
uni.setStorage({
  key: string,
  data: any,
  success?: function,
  fail?: function
})

// Get storage
uni.getStorage({
  key: string,
  success?: function,
  fail?: function
})

Conditional Compilation API

// #ifdef 平台名称
// 平台特定代码
// #endif

// #ifndef 平台名称
// 非平台特定代码
// #endif

// #ifdef H5
// H5 平台代码
// #endif

// #ifdef MP-WEIXIN
// 微信小程序代码
// #endif

// #ifdef APP-PLUS
// App 平台代码
// #endif

Key Points

• Configure easycom for automatic component import
• Use pages.json for page routing configuration
• Configure manifest.json for each platform
• Use UniAppX APIs with uView Pro components
• Use conditional compilation for platform-specific code
• Use TypeScript for type safety

Build Optimization | 构建优化

Instructions

This example demonstrates how to optimize UniAppX builds with uView Pro.

Key Concepts

• Code splitting
• Tree shaking
• Component lazy loading
• Build configuration

Example: Component Lazy Loading

<!-- pages/index/index.vue -->
<template>
  <view>
    <u-button @click="showModal = true">打开弹窗</u-button>
    <u-modal v-if="showModal" v-model="showModal">
      <view>内容</view>
    </u-modal>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const showModal = ref(false)
</script>

Example: Conditional Component Loading

<template>
  <view>
    <!-- #ifdef H5 -->
    <u-upload :file-list="fileList" />
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <u-upload :file-list="fileList" />
    <!-- #endif -->
  </view>
</template>

Key Points

• Use conditional compilation to exclude unused components
• Lazy load heavy components
• Optimize images and assets
• Use tree shaking for unused code
• Configure build options in manifest.json
• Test build size on each platform

Custom Theme | 自定义主题

Instructions

This example demonstrates how to customize uView Pro theme in UniAppX projects.

Key Concepts

• Theme variable customization
• SCSS variable override
• Global theme configuration
• Component-specific styling

Example: Custom Theme Variables

/* uni.scss */
// Override uView Pro theme variables
$u-primary: #409EFF;
$u-success: #67C23A;
$u-warning: #E6A23C;
$u-error: #F56C6C;
$u-info: #909399;

// Import uView Pro theme
@import "uview-pro/theme.scss";

Example: Component-Specific Styling

<!-- pages/index/index.vue -->
<template>
  <view>
    <u-button type="primary" custom-style="background: #ff0000;">
      自定义按钮
    </u-button>
  </view>
</template>

<style lang="scss" scoped>
// Component-specific styles
:deep(.u-button) {
  border-radius: 20rpx;
}
</style>

Key Points

• Override theme variables in uni.scss
• Use custom-style prop for inline styles
• Use :deep() for component style override
• Test theme changes on all platforms
• Maintain consistency across components

Multi-Platform Deployment | 多平台部署

Instructions

This example demonstrates multi-platform deployment strategies for UniAppX projects with uView Pro.

Key Concepts

• Platform-specific builds
• Conditional compilation
• Platform testing
• Deployment configuration

Example: Platform-Specific Code

<!-- pages/index/index.vue -->
<template>
  <view>
    <!-- #ifdef H5 -->
    <u-button type="primary">H5 按钮</u-button>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <u-button type="primary">微信小程序按钮</u-button>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS -->
    <u-button type="primary">App 按钮</u-button>
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
// #ifdef H5
// H5 specific code
const h5Function = () => {
  console.log('H5 only')
}
// #endif

// #ifdef MP-WEIXIN
// WeChat mini-program specific code
const mpFunction = () => {
  console.log('MP only')
}
// #endif
</script>

Example: Platform Testing Checklist

## Testing Checklist

### H5
- [ ] Test in Chrome
- [ ] Test in Safari
- [ ] Test responsive design
- [ ] Test browser compatibility

### Mini-Program
- [ ] Test in WeChat DevTools
- [ ] Test on actual device
- [ ] Check code size
- [ ] Test performance

### App
- [ ] Test on Android device
- [ ] Test on iOS device
- [ ] Test native features
- [ ] Test performance

Key Points

• Use conditional compilation for platform-specific code
• Test on all target platforms
• Configure platform-specific settings in manifest.json
• Optimize for each platform's requirements
• Handle platform differences gracefully
• Document platform-specific behaviors

Easycom Configuration | Easycom 配置

Instructions

This example demonstrates how to configure easycom in UniAppX for automatic uView Pro component import.

Key Concepts

• Easycom automatic component import
• Component path configuration
• Autoscan configuration
• Custom component rules
• TypeScript type inference

基本配置

在 pages.json 中配置 easycom：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  }
}

配置说明

• autoscan: true：开启自动扫描
• custom：自定义规则
• ^u-(.*)：匹配以 u- 开头的组件名
• uview-pro/components/u-$1/u-$1.vue：组件路径，$1 是匹配的内容

使用示例

配置后，可以直接使用组件，无需引入：

<template>
  <view>
    <!-- 直接使用，无需 import -->
    <u-button type="primary">按钮</u-button>
    <u-input v-model="value" placeholder="请输入"></u-input>
    <u-form :model="form">
      <u-form-item label="用户名">
        <u-input v-model="form.username"></u-input>
      </u-form-item>
    </u-form>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('')
const form = ref({
  username: ''
})
</script>

完整 pages.json 示例

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniAppX",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  }
}

自定义组件路径

如果 uView Pro 安装在不同位置，需要调整路径：

npm 安装

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "node_modules/uview-pro/components/u-$1/u-$1.vue"
    }
  }
}

uni_modules 安装

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uni_modules/uview-pro/components/u-$1/u-$1.vue"
    }
  }
}

禁用 easycom

如果不想使用 easycom，可以手动引入：

<template>
  <view>
    <u-button>按钮</u-button>
  </view>
</template>

<script setup lang="ts">
import uButton from 'uview-pro/components/u-button/u-button.vue'
</script>

TypeScript 类型支持

使用 easycom 时，TypeScript 类型会自动推断：

<template>
  <view>
    <u-button type="primary" @click="handleClick">按钮</u-button>
  </view>
</template>

<script setup lang="ts">
const handleClick = () => {
  console.log('按钮被点击')
}
</script>

验证配置

创建测试页面验证 easycom 是否生效：

<template>
  <view class="container">
    <u-button type="primary" @click="test">测试 Easycom</u-button>
  </view>
</template>

<script setup lang="ts">
const test = () => {
  console.log('Easycom 配置成功！')
}
</script>

如果按钮正常显示且无报错，说明 easycom 配置成功。

注意事项

1. 路径必须正确：确保组件路径与实际安装位置一致 2. 组件名称：uView Pro 组件都以 u- 开头 3. 重启项目：修改 easycom 配置后需要重启项目 4. 优先级：easycom 优先级高于手动引入 5. 性能：easycom 不会影响性能，按需加载组件 6. TypeScript：TypeScript 类型会自动推断，无需额外配置

Installation | 安装

Instructions

This example demonstrates how to install uView Pro in UniAppX projects via DCloud plugin marketplace (plugin ID: 24633).

Key Concepts

• Installing uView Pro via DCloud plugin marketplace
• Installing via npm
• UniAppX project structure setup
• TypeScript (.uts) file configuration
• Composition API and setup syntax
• SCSS style configuration

Example: Install via DCloud Plugin Marketplace (Recommended)

Official Plugin: https://ext.dcloud.net.cn/plugin?id=24633

# 1. Open HBuilderX
# 2. Open UniAppX project
# 3. Go to Tools -> Plugin Installation
# 4. Search for "uView Pro" or enter plugin ID: 24633
# 5. Click "Import Plugin"
# 6. Plugin will be installed to uni_modules/uview-pro directory

Project Structure After Installation:

project-root/
├── uni_modules/
│   └── uview-pro/
│       ├── components/
│       ├── index.scss
│       └── theme.scss
├── pages/
├── App.vue
├── main.uts
├── pages.json
└── manifest.json

Example: Install via npm

# Install uView Pro package
npm install uview-pro

# Or using yarn
yarn add uview-pro

Import in main.uts:

// main.uts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewPro)
  return {
    app
  }
}

Example: Manual Installation

# 1. Download from DCloud plugin marketplace
# 2. Extract to project root
# 3. Ensure uni_modules/uview-pro/ exists

UniAppX 项目配置

1. 在 main.uts 中引入

// main.uts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewPro)
  return {
    app
  }
}

2. 在 App.vue 中引入样式

<!-- App.vue -->
<style lang="scss">
/* 引入 uView Pro 基础样式 */
@import "uview-pro/index.scss";
</style>

3. 在 uni.scss 中引入主题变量（可选）

/* uni.scss */
@import "uview-pro/theme.scss";

4. 配置 easycom（重要）

在 pages.json 中配置 easycom，实现组件自动引入：

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    // ... 页面配置
  ]
}

5. 验证安装

创建测试页面 pages/index/index.vue：

<template>
  <view class="container">
    <u-button type="primary">uView Pro 按钮</u-button>
  </view>
</template>

<script setup lang="ts">
// UniAppX 使用 setup 语法
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}
</style>

如果按钮正常显示，说明安装成功。

目录结构

安装后的 UniAppX 项目结构：

uniappx-project/
├── uni_modules/
│   └── uview-pro/          # uView Pro 插件
│       ├── components/    # 组件目录
│       ├── index.scss     # 基础样式
│       └── theme.scss     # 主题变量
├── pages/                 # 页面目录
├── static/                # 静态资源
├── App.vue                # 应用入口
├── main.uts               # 主入口文件（UniAppX 使用 .uts）
├── pages.json             # 页面配置
├── manifest.json          # 应用配置
└── uni.scss               # 全局样式变量

UniAppX 特性

TypeScript 支持

UniAppX 使用 TypeScript，需要类型定义：

// main.uts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewPro)
  return {
    app
  }
}

Setup 语法

UniAppX 推荐使用 Composition API 和 setup 语法：

<template>
  <view>
    <u-button type="primary" @click="handleClick">按钮</u-button>
  </view>
</template>

<script setup lang="ts">
const handleClick = () => {
  console.log('按钮被点击')
}
</script>

Example: Verify Installation

<!-- pages/index/index.vue -->
<template>
  <view>
    <u-button type="primary">uView Pro Button</u-button>
  </view>
</template>

<script setup lang="ts">
// UniAppX uses setup syntax
</script>

<style lang="scss" scoped>
// SCSS is required
</style>

Key Points

• Install via DCloud plugin marketplace for easiest integration
• Plugin ID: 24633
• Component will be in uni_modules/uview-pro/components/
• Configure easycom in pages.json for automatic import
• Register uView Pro in main.uts (TypeScript)
• Import SCSS styles in App.vue
• Use setup syntax and Composition API (recommended for UniAppX)
• Test installation by using components in a page

Project Setup | 项目设置

Instructions

This example demonstrates how to set up a UniAppX project to work with uView Pro.

Key Concepts

• UniAppX project structure
• TypeScript (.uts) file configuration
• Composition API and setup syntax
• SCSS style configuration
• Component directory organization

项目结构

标准的 UniAppX + uView Pro 项目结构：

uniappx-project/
├── uni_modules/
│   └── uview-pro/          # uView Pro 插件
├── pages/                 # 页面目录
│   ├── index/
│   │   └── index.vue
│   └── ...
├── components/            # 自定义组件
├── static/               # 静态资源
├── utils/                # 工具函数
├── App.vue               # 应用入口
├── main.uts              # 主入口文件（UniAppX 使用 .uts）
├── pages.json            # 页面配置
├── manifest.json         # 应用配置
└── uni.scss              # 全局样式变量

App.vue 配置

<template>
  <view id="app">
    <!-- 应用根组件 -->
  </view>
</template>

<script setup lang="ts">
// UniAppX 使用 setup 语法
</script>

<style lang="scss">
/* 引入 uView Pro 基础样式 */
@import "uview-pro/index.scss";

/* 全局样式 */
page {
  background-color: #f5f5f5;
}
</style>

main.uts 配置

UniAppX 使用 TypeScript，主入口文件为 main.uts：

// main.uts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewPro)
  return {
    app
  }
}

pages.json 配置

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationStyle": "default",
        "navigationBarBackgroundColor": "#ffffff",
        "navigationBarTextStyle": "black"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniAppX",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-current.png",
        "text": "首页"
      }
    ]
  }
}

uni.scss 配置

/* uni.scss */
/* 引入 uView Pro 主题变量 */
@import "uview-pro/theme.scss";

/* 自定义全局变量 */
$uni-color-primary: #409EFF;
$uni-bg-color: #f5f5f5;

manifest.json 配置要点

{
  "name": "uniappx-uview-pro-project",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "usingComponents": true
  },
  "h5": {
    "router": {
      "mode": "hash"
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  }
}

开发环境配置

HBuilderX 配置

1. 启用 TypeScript 支持：

• 创建 UniAppX 项目时自动启用 TypeScript
• 确保 HBuilderX 版本支持 UniAppX

2. 启用 SCSS 支持：

• 创建项目时选择支持 SCSS
• 或在项目设置中启用 SCSS 编译

TypeScript 配置

UniAppX 项目自动包含 TypeScript 配置，无需额外配置。

条件编译

使用条件编译处理平台差异：

<template>
  <view>
    <!-- #ifdef H5 -->
    <view>H5 平台特有内容</view>
    <!-- #endif -->
    
    <!-- #ifdef MP-WEIXIN -->
    <view>微信小程序特有内容</view>
    <!-- #endif -->
    
    <!-- #ifdef APP-PLUS -->
    <view>App 平台特有内容</view>
    <!-- #endif -->
  </view>
</template>

<script setup lang="ts">
// #ifdef H5
// H5 平台特定代码
// #endif

// #ifdef MP-WEIXIN
// 微信小程序特定代码
// #endif

// #ifdef APP-PLUS
// App 平台特定代码
// #endif
</script>

验证配置

创建测试页面验证配置是否正确：

<template>
  <view class="container">
    <u-navbar title="测试页面"></u-navbar>
    <view class="content">
      <u-button type="primary" @click="test">测试按钮</u-button>
      <u-toast ref="uToast"></u-toast>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const uToast = ref()

const test = () => {
  uToast.value?.show({
    message: '配置成功！'
  })
}
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.content {
  padding: 20rpx;
}
</style>

注意事项

1. TypeScript 支持：UniAppX 使用 TypeScript，确保类型正确 2. Setup 语法：推荐使用 Composition API 和 setup 语法 3. easycom 必须配置：否则需要手动引入每个组件 4. SCSS 必须支持：uView Pro 依赖 SCSS 5. 路径正确性：确保引入路径正确 6. 版本兼容：确保 UniAppX 和 uView Pro 版本兼容 7. 平台测试：在不同平台测试功能

Manifest Configuration | Manifest 配置

Instructions

This example demonstrates how to configure manifest.json for uView Pro in UniAppX projects across different platforms.

Key Concepts

• Platform-specific manifest configuration
• H5 configuration
• Mini-program configuration
• App configuration
• Component support configuration

基本配置

{
  "name": "uniappx-uview-pro-project",
  "appid": "",
  "description": "",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "usingComponents": true
  },
  "h5": {
    "router": {
      "mode": "hash"
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  }
}

H5 平台配置

{
  "h5": {
    "router": {
      "mode": "hash",
      "base": "/"
    },
    "devServer": {
      "https": false,
      "port": 8080
    },
    "publicPath": "/",
    "template": "index.html"
  }
}

微信小程序配置

{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true,
    "permission": {
      "scope.userLocation": {
        "desc": "你的位置信息将用于小程序位置接口的效果展示"
      }
    }
  }
}

App 平台配置

{
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "waiting": true,
      "autoclose": true,
      "delay": 0
    },
    "modules": {},
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
        ]
      },
      "ios": {},
      "sdkConfigs": {}
    }
  }
}

支付宝小程序配置

{
  "mp-alipay": {
    "usingComponents": true
  }
}

百度小程序配置

{
  "mp-baidu": {
    "usingComponents": true
  }
}

字节跳动小程序配置

{
  "mp-toutiao": {
    "usingComponents": true
  }
}

QQ 小程序配置

{
  "mp-qq": {
    "usingComponents": true
  }
}

完整配置示例

{
  "name": "uniappx-uview-pro-project",
  "appid": "",
  "description": "UniAppX + uView Pro 项目",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app"
  },
  "h5": {
    "router": {
      "mode": "hash"
    },
    "devServer": {
      "port": 8080
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true
  },
  "mp-alipay": {
    "usingComponents": true
  },
  "mp-baidu": {
    "usingComponents": true
  },
  "mp-toutiao": {
    "usingComponents": true
  },
  "mp-qq": {
    "usingComponents": true
  },
  "quickapp": {},
  "vueVersion": "3"
}

关键配置说明

usingComponents

所有平台都需要设置 "usingComponents": true，以支持组件使用。

transformPx

建议设置为 false，使用 rpx 单位进行响应式布局。

vueVersion

UniAppX 使用 Vue 3，设置为 "3"。

TypeScript 支持

UniAppX 原生支持 TypeScript，无需额外配置。

注意事项

1. usingComponents：必须设置为 true 2. 平台差异：不同平台有不同的配置项 3. AppID：小程序平台需要配置对应的 AppID 4. 权限配置：根据功能需求配置相应权限 5. 版本号：正确配置版本号和版本名称 6. Vue 版本：UniAppX 使用 Vue 3

Navigation | 导航

Instructions

This example demonstrates how to handle navigation and routing with uView Pro in UniAppX.

Key Concepts

• Page navigation with uView Pro components
• URL parameters passing
• Navigation lifecycle
• Custom navigation bar with uView Pro
• Tab bar navigation

使用 UniAppX 导航 API

页面跳转

// 保留当前页面，跳转到应用内的某个页面
uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})

// 关闭当前页面，跳转到应用内的某个页面
uni.redirectTo({
  url: '/pages/login/login'
})

// 跳转到 tabBar 页面
uni.switchTab({
  url: '/pages/index/index'
})

// 返回上一页面
uni.navigateBack({
  delta: 1
})

使用 uView Pro 按钮进行跳转

<template>
  <view>
    <u-button 
      type="primary" 
      @click="goToDetail"
    >
      跳转到详情页
    </u-button>
  </view>
</template>

<script setup lang="ts">
const goToDetail = () => {
  uni.navigateTo({
    url: '/pages/detail/detail?id=1'
  })
}
</script>

使用 uView Pro 导航栏

自定义导航栏

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ]
}

页面中使用 uView Pro 导航栏：

<template>
  <view>
    <u-navbar 
      title="首页" 
      :border="true"
      :back-icon-color="'#ffffff'"
      :background="{
        background: 'linear-gradient(45deg, #409EFF, #67C23A)'
      }"
    >
      <template #right>
        <u-icon name="more-dot-fill" color="#ffffff" @click="handleRight"></u-icon>
      </template>
    </u-navbar>
    
    <!-- 页面内容 -->
  </view>
</template>

<script setup lang="ts">
const handleRight = () => {
  // 右侧按钮点击事件
}
</script>

使用 uView Pro 返回顶部

<template>
  <view class="container">
    <!-- 长列表内容 -->
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const scrollTop = ref(0)

const onPageScroll = (e: PageScrollOption) => {
  scrollTop.value = e.scrollTop
}
</script>

TabBar 导航

使用原生 TabBar

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#409EFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "text": "我的"
      }
    ]
  }
}

使用 uView Pro TabBar 组件

<template>
  <view>
    <u-tabbar 
      :list="tabbarList" 
      :mid-button="true"
      @change="tabbarChange"
    ></u-tabbar>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const tabbarList = ref([
  {
    iconPath: "static/tab-home.png",
    selectedIconPath: "static/tab-home-current.png",
    text: "首页",
    pagePath: "/pages/index/index"
  },
  {
    iconPath: "static/tab-user.png",
    selectedIconPath: "static/tab-user-current.png",
    text: "我的",
    pagePath: "/pages/user/user"
  }
])

const tabbarChange = (index: number) => {
  const pagePath = tabbarList.value[index].pagePath
  uni.switchTab({
    url: pagePath
  })
}
</script>

页面传参

传递参数

// 跳转并传递参数
uni.navigateTo({
  url: '/pages/detail/detail?id=1&name=test'
})

接收参数

<template>
  <view>
    <text>ID: {{ id }}</text>
    <text>Name: {{ name }}</text>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const id = ref('')
const name = ref('')

onLoad((options) => {
  id.value = options.id as string
  name.value = options.name as string
})
</script>

使用 uView Pro 搜索框导航

<template>
  <view>
    <u-search 
      placeholder="搜索内容" 
      v-model="keyword"
      @search="handleSearch"
      @custom="handleCustom"
    ></u-search>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const keyword = ref('')

const handleSearch = () => {
  uni.navigateTo({
    url: `/pages/search/search?keyword=${keyword.value}`
  })
}

const handleCustom = () => {
  // 自定义操作
}
</script>

导航栏返回按钮自定义

<template>
  <view>
    <u-navbar 
      title="详情页"
      :back-icon-name="'arrow-left'"
      @leftClick="handleBack"
    ></u-navbar>
  </view>
</template>

<script setup lang="ts">
const handleBack = () => {
  // 自定义返回逻辑
  uni.navigateBack({
    delta: 1
  })
}
</script>

注意事项

1. 路径格式：路径必须以 / 开头 2. TabBar 跳转：使用 uni.switchTab 跳转到 tabBar 页面 3. 参数传递：URL 参数需要编码 4. 页面栈：注意页面栈限制（最多 10 层） 5. 返回按钮：自定义导航栏需要自己处理返回逻辑 6. TypeScript：使用 TypeScript 类型定义，确保类型安全

Pages Configuration | Pages 配置

Instructions

This example demonstrates how to configure pages.json for uView Pro in UniAppX projects.

Key Concepts

• Pages routing configuration
• Easycom component configuration
• Navigation bar configuration
• Tab bar configuration with uView Pro
• Custom navigation with uView Pro components

基本配置

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniAppX",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  }
}

使用 uView Pro 导航栏

方式一：使用 uView Pro 导航栏组件

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationStyle": "custom",
        "navigationBarTitleText": "首页"
      }
    }
  ]
}

页面中使用 uView Pro 导航栏：

<template>
  <view>
    <u-navbar title="首页" :border="true"></u-navbar>
    <!-- 页面内容 -->
  </view>
</template>

<script setup lang="ts">
// UniAppX 使用 setup 语法
</script>

方式二：使用原生导航栏

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#409EFF",
        "navigationBarTextStyle": "white"
      }
    }
  ]
}

TabBar 配置

{
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#409EFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-current.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/tab-user.png",
        "selectedIconPath": "static/tab-user-current.png",
        "text": "我的"
      }
    ]
  }
}

使用 uView Pro TabBar 组件

如果使用 uView Pro 的 TabBar 组件，可以禁用原生 TabBar：

{
  "tabBar": {
    "custom": true,
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

页面样式配置

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#409EFF",
        "navigationBarTextStyle": "white",
        "backgroundColor": "#f5f5f5",
        "enablePullDownRefresh": true,
        "onReachBottomDistance": 50
      }
    }
  ]
}

下拉刷新配置

{
  "pages": [
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表",
        "enablePullDownRefresh": true
      }
    }
  ]
}

页面中使用 uView Pro 下拉刷新：

<template>
  <view>
    <u-list @refresh="onRefresh" @loadmore="onLoadMore">
      <!-- 列表内容 -->
    </u-list>
  </view>
</template>

<script setup lang="ts">
const onRefresh = () => {
  // 刷新逻辑
}

const onLoadMore = () => {
  // 加载更多逻辑
}
</script>

条件编译配置

不同平台可以有不同的配置：

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "// #ifdef H5": {
          "navigationStyle": "custom"
        },
        "// #ifdef MP-WEIXIN": {
          "navigationBarTitleText": "微信首页"
        }
      }
    }
  ]
}

完整示例

{
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "navigationBarBackgroundColor": "#409EFF",
        "navigationBarTextStyle": "white"
      }
    },
    {
      "path": "pages/list/list",
      "style": {
        "navigationBarTitleText": "列表",
        "enablePullDownRefresh": true
      }
    }
  ],
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniAppX",
    "navigationBarBackgroundColor": "#ffffff",
    "backgroundColor": "#f5f5f5"
  },
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#409EFF",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      }
    ]
  }
}

注意事项

1. easycom 配置：必须在 pages.json 中配置 easycom 2. 路径正确性：确保组件路径正确 3. 样式配置：合理配置页面样式，与 uView Pro 主题协调 4. 平台差异：注意不同平台的配置差异 5. 性能优化：合理配置下拉刷新和上拉加载 6. TypeScript：UniAppX 使用 TypeScript，注意类型定义

UniAppX API Integration | UniAppX API 集成

Instructions

This example demonstrates how to use UniAppX APIs with uView Pro components.

Key Concepts

• Using UniAppX APIs with uView Pro components
• Network requests for component data
• Storage API for component state
• System information for responsive components
• Lifecycle hooks with uView Pro components
• TypeScript type definitions

Example: Network Request with uView Pro Components

<!-- pages/index/index.vue -->
<template>
  <view>
    <u-button type="primary" :loading="loading" @click="loadData">
      加载数据
    </u-button>
    <u-list v-if="dataList.length > 0">
      <u-list-item v-for="item in dataList" :key="item.id">
        {{ item.name }}
      </u-list-item>
    </u-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)
const dataList = ref([])

const loadData = () => {
  loading.value = true
  uni.request({
    url: 'https://api.example.com/data',
    method: 'GET',
    success: (res) => {
      dataList.value = res.data
    },
    fail: (err) => {
      uni.showToast({
        title: '加载失败',
        icon: 'none'
      })
    },
    complete: () => {
      loading.value = false
    }
  })
}
</script>

Example: Storage API with uView Pro Components

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const userInfo = ref({})

onMounted(() => {
  // Load from cache first
  uni.getStorage({
    key: 'userInfo',
    success: (res) => {
      userInfo.value = res.data
    },
    fail: () => {
      // Load from network
      loadUserInfo()
    }
  })
})

const loadUserInfo = () => {
  uni.request({
    url: 'https://api.example.com/user',
    success: (res) => {
      userInfo.value = res.data
      // Cache the data
      uni.setStorage({
        key: 'userInfo',
        data: res.data
      })
    }
  })
}
</script>

Example: System Information for Responsive Components

<template>
  <view>
    <u-grid :col="gridCol">
      <u-grid-item v-for="item in gridData" :key="item.id">
        {{ item.name }}
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const gridCol = ref(3)
const gridData = ref([])

onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      // Adjust grid columns based on screen width
      if (res.windowWidth > 750) {
        gridCol.value = 4
      } else if (res.windowWidth > 500) {
        gridCol.value = 3
      } else {
        gridCol.value = 2
      }
    }
  })
})
</script>

Example: Show Loading with uView Pro

<template>
  <view>
    <u-loading-page :loading="loading" />
    <u-button @click="loadData">加载数据</u-button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const loading = ref(false)

const loadData = () => {
  loading.value = true
  uni.request({
    url: 'https://api.example.com/data',
    success: (res) => {
      // Handle data
    },
    complete: () => {
      loading.value = false
    }
  })
}
</script>

Example: Pull to Refresh with uView Pro

// pages.json
{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页",
        "enablePullDownRefresh": true
      }
    }
  ]
}

<!-- pages/index/index.vue -->
<script setup lang="ts">
import { ref } from 'vue'

const dataList = ref([])

const onPullDownRefresh = () => {
  loadData()
}

const loadData = () => {
  uni.request({
    url: 'https://api.example.com/data',
    success: (res) => {
      dataList.value = res.data
    },
    complete: () => {
      uni.stopPullDownRefresh()
    }
  })
}
</script>

Example: Navigation with uView Pro Components

<template>
  <view>
    <u-button type="primary" @click="goToDetail">查看详情</u-button>
  </view>
</template>

<script setup lang="ts">
const goToDetail = () => {
  uni.navigateTo({
    url: '/pages/detail/detail?id=123'
  })
}
</script>

Key Points

• Use uni.request() for loading data with uView Pro components
• Use uni.getStorage() and uni.setStorage() for caching component state
• Use uni.getSystemInfo() for responsive component sizing
• Use u-loading-page component for loading states
• Handle pull-to-refresh for component data updates
• Use TypeScript types for better type safety
• Use Composition API and setup syntax (recommended for UniAppX)

App Platform | App 平台

Instructions

This example demonstrates App platform-specific considerations when using uView Pro in UniAppX.

Key Concepts

• App manifest configuration
• Native capabilities
• Performance optimization
• Platform-specific features

Example: App Configuration

// manifest.json
{
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3,
    "splashscreen": {
      "alwaysShowBeforeRender": true,
      "waiting": true,
      "autoclose": true,
      "delay": 0
    },
    "modules": {},
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
        ]
      },
      "ios": {}
    }
  }
}

Example: App Component Usage

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <u-button type="primary" @click="handleClick">按钮</u-button>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const handleClick = () => {
  // #ifdef APP-PLUS
  // App specific code
  plus.navigator.setStatusBarStyle('dark')
  // #endif
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 20rpx;
}
</style>

Key Points

• Configure usingComponents: true in manifest.json
• Use App-specific APIs when needed
• Optimize for native performance
• Handle status bar and navigation bar
• Test on actual device for best results
• Use conditional compilation for App-specific code

H5 Platform | H5 平台

Instructions

This example demonstrates H5 platform-specific considerations when using uView Pro in UniAppX.

Key Concepts

• H5 responsive design
• Browser compatibility
• Performance optimization
• CSS and SCSS support

Example: H5 Responsive Components

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <u-grid :col="gridCol">
      <u-grid-item v-for="item in gridData" :key="item.id">
        {{ item.name }}
      </u-grid-item>
    </u-grid>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'

const gridCol = ref(3)
const gridData = ref([])

onMounted(() => {
  // #ifdef H5
  // H5: Adjust based on window width
  const updateGridCol = () => {
    if (window.innerWidth > 1200) {
      gridCol.value = 4
    } else if (window.innerWidth > 768) {
      gridCol.value = 3
    } else {
      gridCol.value = 2
    }
  }
  updateGridCol()
  window.addEventListener('resize', updateGridCol)
  // #endif
})
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  /* H5: Use viewport units for responsive sizing */
  padding: 20rpx;
  
  // #ifdef H5
  @media (min-width: 768px) {
    padding: 40rpx;
  }
  // #endif
}
</style>

Example: H5 Browser Compatibility

<script setup lang="ts">
import { onMounted } from 'vue'

onMounted(() => {
  // #ifdef H5
  // Check browser compatibility
  if (!window.CSS || !CSS.supports('display', 'flex')) {
    uni.showModal({
      title: '提示',
      content: '您的浏览器版本过低，部分功能可能无法正常使用',
      showCancel: false
    })
  }
  // #endif
})
</script>

Key Points

• H5 supports full CSS and SCSS features
• Use viewport units (vw, vh) for responsive sizing
• Handle window resize events for responsive components
• Check browser compatibility for modern CSS features
• Use conditional compilation (#ifdef H5) for H5-specific code
• Use media queries for responsive design

Mini-Program Platform | 小程序平台

Instructions

This example demonstrates mini-program platform-specific considerations when using uView Pro in UniAppX.

Key Concepts

• Mini-program manifest configuration
• Component performance
• Code size limits
• Platform-specific APIs

Example: Mini-Program Configuration

// manifest.json
{
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true
  }
}

Example: Mini-Program Component Usage

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <u-button type="primary" @click="handleClick">按钮</u-button>
    <u-form :model="formData">
      <u-form-item label="姓名">
        <u-input v-model="formData.name" />
      </u-form-item>
    </u-form>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const formData = ref({
  name: ''
})

const handleClick = () => {
  // #ifdef MP-WEIXIN
  // WeChat mini-program specific code
  wx.showToast({
    title: '操作成功',
    icon: 'success'
  })
  // #endif
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  padding: 20rpx;
}
</style>

Example: Performance Optimization

<template>
  <view>
    <u-list>
      <u-list-item 
        v-for="item in dataList" 
        :key="item.id"
        :lazy-load="true"
      >
        {{ item.name }}
      </u-list-item>
    </u-list>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const dataList = ref([])

// #ifdef MP-WEIXIN
// Mini-program: Optimize for performance
const loadData = () => {
  // Load data in chunks
  uni.request({
    url: 'https://api.example.com/data',
    success: (res) => {
      dataList.value = res.data.slice(0, 20) // Limit initial load
    }
  })
}
// #endif
</script>

Key Points

• Configure usingComponents: true in manifest.json
• Use lazy loading for large lists
• Optimize component usage for code size limits
• Use conditional compilation for platform-specific code
• Test on actual mini-program platform
• Be aware of code package size limits

nvue Platform | nvue 平台

Instructions

This example demonstrates nvue platform-specific considerations when using uView Pro in UniAppX.

Key Concepts

• nvue rendering engine
• Weex syntax
• Performance considerations
• Style limitations

Example: nvue Configuration

// manifest.json
{
  "app-plus": {
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3
  }
}

Example: nvue Component Usage

<!-- pages/index/index.nvue -->
<template>
  <view class="container">
    <u-button type="primary">按钮</u-button>
  </view>
</template>

<script setup lang="ts">
// nvue uses same script setup syntax
</script>

<style lang="scss" scoped>
/* nvue: Limited CSS support */
.container {
  width: 750rpx;
  padding: 20rpx;
  /* Use flexbox for layout */
  flex-direction: column;
}
</style>

Key Points

• nvue has limited CSS support
• Use flexbox for layout
• Avoid complex CSS selectors
• Test on actual device
• Use conditional compilation for nvue-specific code
• Consider performance implications

Basic UniAppX Project Template | 基础 UniAppX 项目模板

Instructions

This template provides a basic UniAppX project structure with uView Pro integration.

Project Structure

uniappx-uview-pro-project/
├── uni_modules/
│   └── uview-pro/
├── pages/
│   ├── index/
│   │   └── index.vue
│   └── detail/
│       └── detail.vue
├── components/
├── static/
├── App.vue
├── main.uts
├── pages.json
├── manifest.json
└── uni.scss

main.uts

// main.uts
import { createSSRApp } from 'vue'
import App from './App.vue'
import uViewPro from 'uview-pro'

export function createApp() {
  const app = createSSRApp(App)
  app.use(uViewPro)
  return {
    app
  }
}

App.vue

<!-- App.vue -->
<template>
  <view id="app">
    <!-- App root -->
  </view>
</template>

<script setup lang="ts">
// App setup
</script>

<style lang="scss">
/* Import uView Pro styles */
@import "uview-pro/index.scss";
</style>

pages.json

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniAppX uView Pro",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

manifest.json

{
  "name": "uniappx-uview-pro-demo",
  "appid": "__UNI__XXXXX",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "h5": {
    "router": {
      "mode": "hash"
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "app-plus": {
    "usingComponents": true
  }
}

pages/index/index.vue

<!-- pages/index/index.vue -->
<template>
  <view class="container">
    <u-button type="primary" @click="handleClick">按钮</u-button>
  </view>
</template>

<script setup lang="ts">
const handleClick = () => {
  uni.showToast({
    title: '点击成功',
    icon: 'success'
  })
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
}
</style>

Key Points

• Use TypeScript (.uts files) for main entry
• Use Composition API and setup syntax
• Configure easycom for automatic component import
• Import uView Pro styles in App.vue
• Use rpx units for responsive sizing

Manifest Configuration Template | Manifest 配置模板

Instructions

This template provides manifest.json configuration for UniAppX projects with uView Pro.

Basic Template

{
  "name": "uniappx-uview-pro-demo",
  "appid": "__UNI__XXXXX",
  "description": "UniAppX uView Pro Demo",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "h5": {
    "router": {
      "mode": "hash"
    }
  },
  "mp-weixin": {
    "appid": "",
    "setting": {
      "urlCheck": false
    },
    "usingComponents": true
  },
  "app-plus": {
    "usingComponents": true
  }
}

Complete Template

{
  "name": "uniappx-uview-pro-demo",
  "appid": "__UNI__XXXXX",
  "versionName": "1.0.0",
  "versionCode": "100",
  "transformPx": false,
  "h5": {
    "devServer": {
      "port": 8080
    },
    "router": {
      "mode": "hash",
      "base": "/"
    },
    "optimization": {
      "treeShaking": {
        "enable": true
      }
    }
  },
  "mp-weixin": {
    "appid": "your-appid",
    "setting": {
      "urlCheck": false,
      "es6": true,
      "enhance": true,
      "postcss": true,
      "minified": true
    },
    "usingComponents": true
  },
  "app-plus": {
    "usingComponents": true,
    "nvueStyleCompiler": "uni-app",
    "compilerVersion": 3,
    "distribute": {
      "android": {
        "permissions": [
          "<uses-permission android:name=\"android.permission.INTERNET\"/>"
        ]
      },
      "ios": {}
    }
  }
}

Key Points

• Configure usingComponents: true for mini-program and App
• Set platform-specific settings
• Configure build options
• Use transformPx: false to avoid unit conversion issues
• Test configuration on each platform

Pages Configuration Template | Pages 配置模板

Instructions

This template provides pages.json configuration for UniAppX projects with uView Pro.

Basic Template

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    }
  ],
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "UniAppX uView Pro",
    "navigationBarBackgroundColor": "#F8F8F8",
    "backgroundColor": "#F8F8F8"
  }
}

With Tab Bar

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "首页"
      }
    },
    {
      "path": "pages/user/user",
      "style": {
        "navigationBarTitleText": "我的"
      }
    }
  ],
  "tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/index/index",
        "iconPath": "static/tab-home.png",
        "selectedIconPath": "static/tab-home-current.png",
        "text": "首页"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/tab-user.png",
        "selectedIconPath": "static/tab-user-current.png",
        "text": "我的"
      }
    ]
  },
  "easycom": {
    "autoscan": true,
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  }
}

Key Points

• Configure pages array with all pages
• Set up easycom for automatic uView Pro component import
• Configure navigation bar titles
• Use tabBar for bottom navigation
• Configure global styles