225 lines
4.7 KiB
Markdown
225 lines
4.7 KiB
Markdown
# 启动画面功能说明
|
|
|
|
## 功能概述
|
|
|
|
启动画面功能为应用提供了优雅的启动体验，包括品牌展示、加载动画和初始化过程。
|
|
|
|
## 文件结构
|
|
|
|
```
|
|
src/
|
|
├── config/
|
|
│ └── splash.js # 启动画面配置文件
|
|
├── utils/
|
|
│ └── splashManager.js # 启动画面管理器
|
|
pages/
|
|
├── splash/
|
|
│ └── splash.vue # 启动画面页面
|
|
└── splash-test/
|
|
└── splash-test.vue # 启动画面测试页面
|
|
```
|
|
|
|
## 功能特性
|
|
|
|
### 1. 智能启动控制
|
|
- **冷启动**: 首次启动或应用被完全关闭后重新启动
|
|
- **热启动**: 应用在后台被重新激活
|
|
- **自动判断**: 系统自动判断启动类型，决定是否显示启动画面
|
|
|
|
### 2. 优雅的视觉效果
|
|
- **渐变背景**: 使用紫色渐变背景，营造现代感
|
|
- **浮动动画**: 背景圆形元素的浮动动画效果
|
|
- **毛玻璃效果**: 使用 `backdrop-filter` 实现毛玻璃质感
|
|
- **脉冲动画**: Logo图标的脉冲呼吸效果
|
|
|
|
### 3. 加载步骤管理
|
|
- **分步加载**: 将启动过程分为多个步骤
|
|
- **实时反馈**: 显示当前加载步骤和进度
|
|
- **错误处理**: 单个步骤失败不影响整体启动流程
|
|
|
|
### 4. 可配置性
|
|
- **显示时间**: 可配置最小和最大显示时间
|
|
- **加载步骤**: 可自定义加载步骤和文本
|
|
- **主题样式**: 可配置颜色、字体等视觉元素
|
|
|
|
## 配置说明
|
|
|
|
### 基本配置
|
|
|
|
```javascript
|
|
// src/config/splash.js
|
|
export const splashConfig = {
|
|
app: {
|
|
name: '企业办公',
|
|
nameEn: 'Enterprise Office',
|
|
version: '1.0.0',
|
|
logo: '🏢'
|
|
},
|
|
display: {
|
|
minDuration: 2000, // 最小显示时间
|
|
maxDuration: 5000, // 最大显示时间
|
|
showOnWarmStart: false, // 热启动时是否显示
|
|
showVersion: true // 是否显示版本信息
|
|
}
|
|
}
|
|
```
|
|
|
|
### 加载步骤配置
|
|
|
|
```javascript
|
|
loadingSteps: [
|
|
{
|
|
text: '正在初始化...',
|
|
duration: 800,
|
|
action: 'init',
|
|
icon: '⚙️'
|
|
},
|
|
{
|
|
text: '加载用户数据...',
|
|
duration: 1000,
|
|
action: 'loadUserData',
|
|
icon: '👤'
|
|
}
|
|
]
|
|
```
|
|
|
|
## 使用方法
|
|
|
|
### 1. 基本使用
|
|
|
|
启动画面会自动在应用启动时显示，无需额外配置。
|
|
|
|
### 2. 自定义配置
|
|
|
|
```javascript
|
|
import { updateSplashConfig } from '@/src/config/splash.js'
|
|
|
|
// 更新配置
|
|
updateSplashConfig({
|
|
display: {
|
|
minDuration: 3000,
|
|
showOnWarmStart: true
|
|
}
|
|
})
|
|
```
|
|
|
|
### 3. 添加自定义加载步骤
|
|
|
|
```javascript
|
|
import { updateSplashConfig } from '@/src/config/splash.js'
|
|
|
|
updateSplashConfig({
|
|
loadingSteps: [
|
|
// 现有步骤...
|
|
{
|
|
text: '同步云端数据...',
|
|
duration: 1200,
|
|
action: 'syncCloudData',
|
|
icon: '☁️'
|
|
}
|
|
]
|
|
})
|
|
```
|
|
|
|
### 4. 实现自定义加载逻辑
|
|
|
|
```javascript
|
|
// src/utils/splashManager.js
|
|
async function syncCloudData() {
|
|
// 实现云端数据同步逻辑
|
|
await syncUserData()
|
|
await syncWorkData()
|
|
console.log('云端数据同步完成')
|
|
}
|
|
```
|
|
|
|
## 测试功能
|
|
|
|
访问 `/pages/splash-test/splash-test` 页面可以：
|
|
|
|
- 测试启动画面效果
|
|
- 重置启动状态
|
|
- 模拟冷启动/热启动
|
|
- 查看当前配置信息
|
|
|
|
## 技术实现
|
|
|
|
### 1. 启动检测
|
|
|
|
```javascript
|
|
// 检查是否应该显示启动画面
|
|
export function shouldShowSplash() {
|
|
const isColdStart = !getApp().globalData?.isWarmStart
|
|
return isColdStart
|
|
}
|
|
```
|
|
|
|
### 2. 步骤执行
|
|
|
|
```javascript
|
|
// 执行加载步骤
|
|
export async function executeLoadingStep(step) {
|
|
try {
|
|
switch (step.action) {
|
|
case 'init':
|
|
await initializeApp()
|
|
break
|
|
case 'loadUserData':
|
|
await loadUserData()
|
|
break
|
|
}
|
|
return true
|
|
} catch (error) {
|
|
console.error(`步骤 ${step.action} 执行失败:`, error)
|
|
return false
|
|
}
|
|
}
|
|
```
|
|
|
|
### 3. 动画效果
|
|
|
|
```scss
|
|
// 浮动动画
|
|
@keyframes float {
|
|
0%, 100% {
|
|
transform: translateY(0px) rotate(0deg);
|
|
opacity: 0.7;
|
|
}
|
|
50% {
|
|
transform: translateY(-20px) rotate(180deg);
|
|
opacity: 0.3;
|
|
}
|
|
}
|
|
|
|
// 脉冲动画
|
|
@keyframes pulse {
|
|
0%, 100% {
|
|
transform: scale(1);
|
|
}
|
|
50% {
|
|
transform: scale(1.05);
|
|
}
|
|
}
|
|
```
|
|
|
|
## 注意事项
|
|
|
|
1. **性能优化**: 启动画面不应包含过重的计算或网络请求
|
|
2. **错误处理**: 确保单个步骤失败不会影响整体启动流程
|
|
3. **用户体验**: 避免启动画面显示时间过长
|
|
4. **兼容性**: 确保在不同设备和平台上都能正常显示
|
|
|
|
## 扩展功能
|
|
|
|
### 1. 添加品牌动画
|
|
可以在启动画面中添加更复杂的品牌动画效果。
|
|
|
|
### 2. 多语言支持
|
|
根据用户语言设置显示不同的启动文本。
|
|
|
|
### 3. 主题切换
|
|
根据用户设置显示不同主题的启动画面。
|
|
|
|
### 4. 网络检测
|
|
根据网络状态调整加载步骤和显示内容。
|