mirror of
https://github.com/ialley-workshop-open/uni-halo.git
synced 2026-09-12 16:40:40 +08:00
refactor: 架构升级
This commit is contained in:
小莫唐尼
@@ -0,0 +1,57 @@
|
||||
# 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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
|
||||
@@ -0,0 +1,55 @@
|
||||
# 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
|
||||
|
||||
```scss
|
||||
/* 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
@@ -0,0 +1,82 @@
|
||||
# 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```markdown
|
||||
## 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
|
||||
@@ -0,0 +1,183 @@
|
||||
# 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：
|
||||
|
||||
```json
|
||||
{
|
||||
"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` 是匹配的内容
|
||||
|
||||
### 使用示例
|
||||
|
||||
配置后，可以直接使用组件，无需引入：
|
||||
|
||||
```vue
|
||||
<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 示例
|
||||
|
||||
```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 安装
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "node_modules/uview-pro/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### uni_modules 安装
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uni_modules/uview-pro/components/u-$1/u-$1.vue"
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 禁用 easycom
|
||||
|
||||
如果不想使用 easycom，可以手动引入：
|
||||
|
||||
```vue
|
||||
<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 类型会自动推断：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<u-button type="primary" @click="handleClick">按钮</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const handleClick = () => {
|
||||
console.log('按钮被点击')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 验证配置
|
||||
|
||||
创建测试页面验证 easycom 是否生效：
|
||||
|
||||
```vue
|
||||
<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 类型会自动推断，无需额外配置
|
||||
@@ -0,0 +1,243 @@
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# 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
|
||||
|
||||
```bash
|
||||
# Install uView Pro package
|
||||
npm install uview-pro
|
||||
|
||||
# Or using yarn
|
||||
yarn add uview-pro
|
||||
```
|
||||
|
||||
**Import in main.uts:**
|
||||
```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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: Manual Installation
|
||||
|
||||
```bash
|
||||
# 1. Download from DCloud plugin marketplace
|
||||
# 2. Extract to project root
|
||||
# 3. Ensure uni_modules/uview-pro/ exists
|
||||
```
|
||||
|
||||
## UniAppX 项目配置
|
||||
|
||||
### 1. 在 main.uts 中引入
|
||||
|
||||
```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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 在 App.vue 中引入样式
|
||||
|
||||
```vue
|
||||
<!-- App.vue -->
|
||||
<style lang="scss">
|
||||
/* 引入 uView Pro 基础样式 */
|
||||
@import "uview-pro/index.scss";
|
||||
</style>
|
||||
```
|
||||
|
||||
### 3. 在 uni.scss 中引入主题变量（可选）
|
||||
|
||||
```scss
|
||||
/* uni.scss */
|
||||
@import "uview-pro/theme.scss";
|
||||
```
|
||||
|
||||
### 4. 配置 easycom（重要）
|
||||
|
||||
在 `pages.json` 中配置 easycom，实现组件自动引入：
|
||||
|
||||
```json
|
||||
{
|
||||
"easycom": {
|
||||
"autoscan": true,
|
||||
"custom": {
|
||||
"^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
// ... 页面配置
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 验证安装
|
||||
|
||||
创建测试页面 `pages/index/index.vue`：
|
||||
|
||||
```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，需要类型定义：
|
||||
|
||||
```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 语法：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<u-button type="primary" @click="handleClick">按钮</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const handleClick = () => {
|
||||
console.log('按钮被点击')
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### Example: Verify Installation
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
@@ -0,0 +1,263 @@
|
||||
# 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 配置
|
||||
|
||||
```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`：
|
||||
|
||||
```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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### pages.json 配置
|
||||
|
||||
```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 配置
|
||||
|
||||
```scss
|
||||
/* uni.scss */
|
||||
/* 引入 uView Pro 主题变量 */
|
||||
@import "uview-pro/theme.scss";
|
||||
|
||||
/* 自定义全局变量 */
|
||||
$uni-color-primary: #409EFF;
|
||||
$uni-bg-color: #f5f5f5;
|
||||
```
|
||||
|
||||
### manifest.json 配置要点
|
||||
|
||||
```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 配置，无需额外配置。
|
||||
|
||||
### 条件编译
|
||||
|
||||
使用条件编译处理平台差异：
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
## 验证配置
|
||||
|
||||
创建测试页面验证配置是否正确：
|
||||
|
||||
```vue
|
||||
<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. **平台测试**：在不同平台测试功能
|
||||
@@ -0,0 +1,227 @@
|
||||
# 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
|
||||
|
||||
### 基本配置
|
||||
|
||||
```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
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### H5 平台配置
|
||||
|
||||
```json
|
||||
{
|
||||
"h5": {
|
||||
"router": {
|
||||
"mode": "hash",
|
||||
"base": "/"
|
||||
},
|
||||
"devServer": {
|
||||
"https": false,
|
||||
"port": 8080
|
||||
},
|
||||
"publicPath": "/",
|
||||
"template": "index.html"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 微信小程序配置
|
||||
|
||||
```json
|
||||
{
|
||||
"mp-weixin": {
|
||||
"appid": "your-appid",
|
||||
"setting": {
|
||||
"urlCheck": false,
|
||||
"es6": true,
|
||||
"enhance": true,
|
||||
"postcss": true,
|
||||
"minified": true
|
||||
},
|
||||
"usingComponents": true,
|
||||
"permission": {
|
||||
"scope.userLocation": {
|
||||
"desc": "你的位置信息将用于小程序位置接口的效果展示"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### App 平台配置
|
||||
|
||||
```json
|
||||
{
|
||||
"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": {}
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 支付宝小程序配置
|
||||
|
||||
```json
|
||||
{
|
||||
"mp-alipay": {
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 百度小程序配置
|
||||
|
||||
```json
|
||||
{
|
||||
"mp-baidu": {
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 字节跳动小程序配置
|
||||
|
||||
```json
|
||||
{
|
||||
"mp-toutiao": {
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### QQ 小程序配置
|
||||
|
||||
```json
|
||||
{
|
||||
"mp-qq": {
|
||||
"usingComponents": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 完整配置示例
|
||||
|
||||
```json
|
||||
{
|
||||
"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
|
||||
@@ -0,0 +1,292 @@
|
||||
# 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
|
||||
|
||||
#### 页面跳转
|
||||
|
||||
```typescript
|
||||
// 保留当前页面，跳转到应用内的某个页面
|
||||
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 按钮进行跳转
|
||||
|
||||
```vue
|
||||
<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 导航栏
|
||||
|
||||
#### 自定义导航栏
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
页面中使用 uView Pro 导航栏：
|
||||
|
||||
```vue
|
||||
<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 返回顶部
|
||||
|
||||
```vue
|
||||
<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
|
||||
|
||||
```json
|
||||
{
|
||||
"tabBar": {
|
||||
"color": "#7A7E83",
|
||||
"selectedColor": "#409EFF",
|
||||
"borderStyle": "black",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/user/user",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
#### 使用 uView Pro TabBar 组件
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### 页面传参
|
||||
|
||||
#### 传递参数
|
||||
|
||||
```typescript
|
||||
// 跳转并传递参数
|
||||
uni.navigateTo({
|
||||
url: '/pages/detail/detail?id=1&name=test'
|
||||
})
|
||||
```
|
||||
|
||||
#### 接收参数
|
||||
|
||||
```vue
|
||||
<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 搜索框导航
|
||||
|
||||
```vue
|
||||
<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>
|
||||
```
|
||||
|
||||
### 导航栏返回按钮自定义
|
||||
|
||||
```vue
|
||||
<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 类型定义，确保类型安全
|
||||
@@ -0,0 +1,273 @@
|
||||
# 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
|
||||
|
||||
### 基本配置
|
||||
|
||||
```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 导航栏
|
||||
|
||||
#### 方式一：使用 uView Pro 导航栏组件
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationStyle": "custom",
|
||||
"navigationBarTitleText": "首页"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
页面中使用 uView Pro 导航栏：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<u-navbar title="首页" :border="true"></u-navbar>
|
||||
<!-- 页面内容 -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
// UniAppX 使用 setup 语法
|
||||
</script>
|
||||
```
|
||||
|
||||
#### 方式二：使用原生导航栏
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#409EFF",
|
||||
"navigationBarTextStyle": "white"
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### TabBar 配置
|
||||
|
||||
```json
|
||||
{
|
||||
"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：
|
||||
|
||||
```json
|
||||
{
|
||||
"tabBar": {
|
||||
"custom": true,
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "首页"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### 页面样式配置
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"navigationBarBackgroundColor": "#409EFF",
|
||||
"navigationBarTextStyle": "white",
|
||||
"backgroundColor": "#f5f5f5",
|
||||
"enablePullDownRefresh": true,
|
||||
"onReachBottomDistance": 50
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 下拉刷新配置
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/list/list",
|
||||
"style": {
|
||||
"navigationBarTitleText": "列表",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
页面中使用 uView Pro 下拉刷新：
|
||||
|
||||
```vue
|
||||
<template>
|
||||
<view>
|
||||
<u-list @refresh="onRefresh" @loadmore="onLoadMore">
|
||||
<!-- 列表内容 -->
|
||||
</u-list>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const onRefresh = () => {
|
||||
// 刷新逻辑
|
||||
}
|
||||
|
||||
const onLoadMore = () => {
|
||||
// 加载更多逻辑
|
||||
}
|
||||
</script>
|
||||
```
|
||||
|
||||
### 条件编译配置
|
||||
|
||||
不同平台可以有不同的配置：
|
||||
|
||||
```json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"// #ifdef H5": {
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"// #ifdef MP-WEIXIN": {
|
||||
"navigationBarTitleText": "微信首页"
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### 完整示例
|
||||
|
||||
```json
|
||||
{
|
||||
"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，注意类型定义
|
||||
@@ -0,0 +1,233 @@
|
||||
# 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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
|
||||
|
||||
```vue
|
||||
<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
|
||||
|
||||
```vue
|
||||
<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
|
||||
|
||||
```json
|
||||
// pages.json
|
||||
{
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "首页",
|
||||
"enablePullDownRefresh": true
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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)
|
||||
@@ -0,0 +1,78 @@
|
||||
# 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
|
||||
|
||||
```json
|
||||
// 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
@@ -0,0 +1,95 @@
|
||||
# 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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
|
||||
@@ -0,0 +1,118 @@
|
||||
# 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
|
||||
|
||||
```json
|
||||
// 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
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
|
||||
```vue
|
||||
<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
|
||||
@@ -0,0 +1,58 @@
|
||||
# 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
|
||||
|
||||
```json
|
||||
// manifest.json
|
||||
{
|
||||
"app-plus": {
|
||||
"nvueStyleCompiler": "uni-app",
|
||||
"compilerVersion": 3
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### Example: nvue Component Usage
|
||||
|
||||
```vue
|
||||
<!-- 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
|
||||
Reference in New Issue
Block a user