更新记录

1.0.0 下载此版本

init

平台兼容性

uni-app(4.75)

uni-app x(4.75)

启动页管理器 (One Splash Manager)

简洁高效的 uni-app 启动页管理插件，提供完整的启动页解决方案。

📁 项目结构

one-splash-manager/
├── components/
│   └── splash-provider/
│       └── splash-provider.vue     # 高阶启动页组件（核心组件）
├── js_sdk/
│   ├── composables.js              # 组合式函数（核心逻辑）
│   └── index.js                    # 主入口文件
├── package.json                    # 插件配置文件
└── readme.md                       # 说明文档

📄 文件说明

核心文件

js_sdk/composables.js

• 作用: 启动页管理的核心逻辑实现
• 功能:
  • 提供 useSplashManager 组合式函数
  • 管理启动页状态（显示/隐藏、进度、配置）
  • 处理存储逻辑（显示模式、加载次数）
  • 定时器管理和进度动画
• 导出: useSplashManager, SPLASH_MODES

components/splash-provider/splash-provider.vue

• 作用: 高阶启动页组件
• 功能:
  • 包装整个页面，提供启动页功能
  • 内置美观的默认启动页样式
  • 支持完全自定义启动页内容
  • 提供插槽和事件系统
• 特点: 开箱即用，支持高度定制

js_sdk/index.js

• 作用: 插件主入口文件
• 功能:
  • 统一导出所有 API
  • 提供默认导出对象
• 导出: useSplashManager, SPLASH_MODES, SplashProvider

配置文件

package.json

• 作用: uni_modules 插件配置
• 内容:
  • 插件基本信息（名称、版本、描述）
  • 平台兼容性配置
  • DCloud 插件市场配置

🚀 使用方式

方式1: 高阶组件（推荐）

<template>
  <splash-provider 
    :config="splashConfig" 
    @complete="handleComplete"
  >
    <!-- 自定义启动页内容（可选） -->
    <template #splash="{ config, progress, onSkip, onComplete }">
      <view class="custom-splash">
        <image src="/static/logo.png" />
        <text>{{ config.title }}</text>
        <progress :percent="progress" />
        <button @click="onSkip">跳过</button>
      </view>
    </template>

    <!-- 主要内容 -->
    <view class="main-page">
      <text>这是主要内容</text>
    </view>
  </splash-provider>
</template>

<script>
import { SplashProvider } from '@/uni_modules/one-splash-manager/js_sdk/index.js'

export default {
  components: {
    SplashProvider
  },
  data() {
    return {
      splashConfig: {
        duration: 3000,
        backgroundColor: '#fff',
        textColor: '#333333',
        logoUrl: '',
        title: '欢迎使用',
        subtitle: '正在为您准备精彩内容',
        showProgress: true,
        enableSkip: true,
        mode: 'once' // 'always' | 'once' | 'never'
      }
    }
  },
  methods: {
    handleComplete() {
      console.log('启动页完成')
    }
  }
}
</script>

方式2: 组合式函数

<script setup>
import { useSplashManager, SPLASH_MODES } from '@/uni_modules/one-splash-manager/js_sdk/index.js'

const {
  splashVisible,
  splashConfig,
  splashProgress,
  initSplash,
  skipSplash,
  setMode,
  getCount,
  resetCount
} = useSplashManager()

// 显示启动页
const showSplash = () => {
  initSplash({
    duration: 3000,
    title: '我的应用',
    onComplete: () => {
      console.log('启动页完成')
    }
  })
}

// 设置显示模式
setMode(SPLASH_MODES.ONCE)
</script>

⚙️ 配置选项

const config = {
  duration: 3000,           // 显示时长（毫秒）
  backgroundColor: '#fff',   // 背景色
  textColor: '#333333',     // 文字颜色
  logoUrl: '',               // logo地址
  title: '欢迎使用',         // 标题
  subtitle: '正在为您准备精彩内容', // 副标题
  showProgress: true,       // 是否显示进度条
  enableSkip: true,         // 是否启用跳过按钮
  mode: 'always',           // 显示模式: 'always' | 'once' | 'never'
  onComplete: () => {},     // 完成回调
  onSkip: () => {}          // 跳过回调
}

🎯 显示模式

• SPLASH_MODES.ALWAYS: 每次启动都显示
• SPLASH_MODES.ONCE: 仅首次启动显示
• SPLASH_MODES.NEVER: 永不显示

📦 存储管理

插件使用 uni.storage 管理状态：

• splash_mode: 显示模式
• splash_count: 加载次数

🔧 API 参考

useSplashManager()

返回启动页管理相关的响应式状态和方法：

const {
  // 响应式状态
  splashVisible,      // 是否可见
  splashConfig,       // 配置对象
  splashProgress,     // 进度值 (0-100)
  splashProgressText, // 进度文本

  // 方法
  initSplash,         // 初始化启动页
  skipSplash,         // 跳过启动页
  setMode,            // 设置显示模式
  getMode,            // 获取显示模式
  getCount,           // 获取加载次数
  resetCount          // 重置加载次数
} = useSplashManager()

🎨 样式定制

组件提供了完整的 CSS 类名，支持样式覆盖：

/* 启动页容器 */
.splash-container { }

/* 默认启动页 */
.default-splash { }
.splash-content { }
.splash-logo { }
.splash-title { }
.splash-subtitle { }

/* 进度条 */
.progress-container { }
.progress-bar { }
.progress-fill { }
.progress-text { }

/* 跳过按钮 */
.skip-button { }
.skip-text { }

📱 平台兼容性

• ✅ H5
• ✅ 小程序（微信、支付宝、百度等）
• ✅ App（Vue、nvue）
• ✅ 快应用

📄 许可证

MIT License