更新记录

1.0.0（2026-03-18）下载此版本

Added

初始版本发布
支持自定义 Logo 图片
支持自定义应用名称和版本号
自动获取应用信息（名称和版本）
响应式设计，适配不同屏幕尺寸
支持 Vue 3 + TypeScript
增加了布局方向选项（垂直/水平）
增加了对齐方式选项（居中/左对齐/右对齐）
增加了动画效果
增加了点击事件支持
增加了悬停效果
增加了自定义样式选项
增加了隐藏版本号选项

Features

轻量级，无外部依赖
支持 H5、小程序、App 等所有 uni-app 支持的平台
简洁美观的 Logo 展示效果
易于集成和使用

平台兼容性

uni-app(3.7.0)

Vue2	Vue3	Chrome	Safari	app-vue	app-nvue	Android	iOS	鸿蒙
-	√	√	√	√	√	√	√	√

微信小程序	支付宝小程序	抖音小程序	百度小程序	快手小程序	京东小程序	鸿蒙元服务	QQ小程序	飞书小程序	小红书小程序	快应用-华为	快应用-联盟
√	√	√	√	√	√	√	√	√	√	√	√

uni-app x(3.7.0)

Chrome	Safari	Android	iOS	鸿蒙	微信小程序
-	-	-	-	-	-

其他

多语言	暗黑模式	宽屏模式
×	×	√

open-logo

插件介绍

open-logo 是一个功能丰富的 Logo 展示组件，用于在 uni-app 项目中显示应用的 Logo、名称和版本号。它支持多种自定义选项和动画效果，提供了美观的视觉展示。

功能特性

✅ 支持自定义 Logo 图片
✅ 支持自定义应用名称和版本号
✅ 支持垂直和水平布局
✅ 支持居中、左对齐和右对齐
✅ 支持动画效果
✅ 支持点击事件
✅ 支持自定义样式
✅ 支持悬停效果
✅ 自动获取应用信息（名称和版本）
✅ 响应式设计，适配不同屏幕尺寸
✅ 轻量级，无外部依赖
✅ 支持 Vue 3 + TypeScript

安装方法

方式一：通过 uni_modules 安装

在 HBuilderX 中，通过 插件市场 搜索 open-logo 并安装。

方式二：手动安装

将 open-logo 目录复制到项目的 uni_modules 目录中。

使用示例

基本用法

<template>
  <view class="container">
    <!-- 默认 Logo -->
    <open-logo />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

自定义 Logo 和信息

<template>
  <view class="container">
    <!-- 自定义 Logo 和信息 -->
    <open-logo 
      logo="https://example.com/logo.png" 
      name="我的应用" 
      version="v1.0.0" 
    />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

水平布局

<template>
  <view class="container">
    <!-- 水平布局 -->
    <open-logo 
      direction="horizontal" 
      align="left" 
      name="我的应用" 
      version="v1.0.0" 
    />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

带动画效果

<template>
  <view class="container">
    <!-- 带动画效果 -->
    <open-logo 
      animate 
      name="我的应用" 
      version="v1.0.0" 
    />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

带点击事件

<template>
  <view class="container">
    <!-- 带点击事件 -->
    <open-logo 
      name="我的应用" 
      version="v1.0.0" 
      @tap="handleLogoTap" 
    />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';

const handleLogoTap = () => {
  console.log('Logo 被点击');
};
</script>

自定义样式

<template>
  <view class="container">
    <!-- 自定义样式 -->
    <open-logo 
      name="我的应用" 
      version="v1.0.0"
      :style="{ padding: '30rpx' }"
      :logoStyle="{ width: '200rpx', height: '200rpx' }"
      :nameStyle="{ fontSize: '40rpx', color: '#333' }"
      :versionStyle="{ fontSize: '28rpx', color: '#999' }"
    />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

隐藏版本号

<template>
  <view class="container">
    <!-- 隐藏版本号 -->
    <open-logo 
      name="我的应用" 
      :showVersion="false" 
    />
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

API 文档

Props

参数	类型	默认值	说明
logo	String	'/static/logo.png'	自定义 Logo 图片路径
name	String	''	应用名称，为空时自动获取
version	String	''	应用版本，为空时自动获取
showVersion	Boolean	true	是否显示版本号
animate	Boolean	false	是否启用动画效果
direction	String	'vertical'	布局方向，可选值：'vertical'、'horizontal'
align	String	'center'	对齐方式，可选值：'center'、'left'、'right'
style	Object	{}	自定义容器样式
logoStyle	Object	{}	自定义 Logo 样式
nameStyle	Object	{}	自定义名称样式
versionStyle	Object	{}	自定义版本样式

Events

事件名	说明	回调参数
tap	Logo 被点击时触发	无

示例

示例 1：默认 Logo

<open-logo />

示例 2：自定义 Logo

<open-logo logo="https://example.com/logo.png" />

示例 3：自定义名称和版本

<open-logo name="我的应用" version="v2.0.0" />

示例 4：水平布局

<open-logo direction="horizontal" align="left" />

示例 5：带动画效果

<open-logo animate />

示例 6：带点击事件

<open-logo @tap="handleLogoTap" />

示例 7：隐藏版本号

<open-logo :showVersion="false" />

注意事项

当 name 为空时，组件会尝试通过 uni.getAppBaseInfo() 获取应用名称和版本号。
当 logo 为空时，会使用默认路径 /static/logo.png，请确保该路径存在图片。
动画效果在首次加载时触发，提升用户体验。
自定义样式会与默认样式合并，优先级高于默认样式。
水平布局时，Logo、名称和版本号会在同一行显示。

兼容性

支持 H5、小程序、App 等所有 uni-app 支持的平台
支持 Vue 3 + TypeScript
兼容 uni-app 2.0+ 版本

示例场景

应用启动页

<template>
  <view class="splash-screen">
    <open-logo 
      animate 
      name="美图秀秀" 
      version="v1.0.0" 
    />
    <view class="loading">加载中...</view>
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

<style scoped>
.splash-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #fff;
}

.loading {
  margin-top: 50rpx;
  font-size: 32rpx;
  color: #666;
}
</style>

应用头部

<template>
  <view class="header">
    <open-logo 
      direction="horizontal" 
      align="left"
      :logoStyle="{ width: '80rpx', height: '80rpx', marginBottom: '0' }"
      :nameStyle="{ fontSize: '32rpx' }"
      :versionStyle="{ fontSize: '24rpx' }"
    />
    <view class="header-actions">
      <!-- 头部操作按钮 -->
    </view>
  </view>
</template>

<script setup>
import OpenLogo from '@/uni_modules/open-logo/components/open-logo/open-logo.vue';
</script>

<style scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-actions {
  display: flex;
  gap: 20rpx;
}
</style>

贡献

欢迎提交 Issue 和 Pull Request 来改进这个插件。

许可证

MIT License

open-logo open-logo