uniapp怎么改图标和名称

本文介绍了在UniApp中修改应用图标和名称的步骤。首先,通过HBuilderX打开manifest.json文件,然后更改App图标配置,选择png格式的图标图片,自动生成并替换所有图标,最后打包应用。

Uniapp作为一个跨平台开发框架,非常实用方便,可以帮助开发者快速创建多平台应用。对于经常要进行应用开发的开发者来说,掌握UniApp框架是非常有必要的。在开发过程中,我们经常需要对应用进行一些基础设置,如改变应用图标和名称。本文将为大家介绍如何在UniApp中修改应用的图标和名称。

一、 修改应用图标
UniApp中的应用图标是指在移动设备主屏幕上展示的图标,它是非常重要的一部分。应用的图标不仅可以体现应用的特色,还能提升用户体验。下面我们来介绍如何在UniApp中修改应用图标。

1. 在 HBuilderX 中打开 manifest.json 文件,找到 App图标配置。

在这里插入图片描述

2、在自动生成图标文件中点击 浏览,选择图标图片。

注意:这里选择的图片是 png 格式,不能是 jpg 手动改成 png 的。

在这里插入图片描述
点击 自动生成所有图标并替换

在这里插入图片描述
生成完成

可以移动鼠标到上面查看

在这里插入图片描述
接着打包,欧了

原文:https://blog.youkuaiyun.com/wsjzzcbq/article/details/120159397

### 如何设置或更 UniApp 应用图标 在开发过程中,如果需要修 UniApp 的应用图标,可以通过配置 `manifest.json` 文件来实现。以下是详细的说明: #### 修应用图标UniApp 中,应用图标的修主要通过项目的 `manifest.json` 配置文件完成。具体操作如下: - 打开项目根目录下的 `manifest.json` 文件。 - 转到 **“App模块”** 或者 **“基础信息”** 页面,在该页面可以找到关于应用名称图标的相关选项。 - 将所需的图标上传至指定位置,通常支持 PNG 格式的图片[^1]。 需要注意的是,默认情况下,如果没有正确配置自定义图标路径,则会使用 HBuilder 默认提供的图标作为占位符。 #### 图标尺寸要求 不同平台对于应用图标的尺寸有不同的要求,因此建议准备多套分辨率的图标以适配各种设备屏幕密度。一般推荐制作以下几种规格的图标并放置于静态资源目录下(如 `/static/icons/`): | 平台 | 推荐大小 (像素) | |------------|----------------| | Android | 96×96 | | iOS | 1024×1024 | 这些图标应命名为一致以便管理,例如:`icon_72x72.png`, `icon_96x96.png` 等等[^3]。 #### 动态加载字体图标 除了直接替换整个 APP 图标外,还可以利用 CSS HTML 实现动态加载字体图标的功能。这适用于某些特定场景比如导航栏按钮或者菜单项内的小标志显示。下面是一个例子展示如何导入远程服务器上的 `.ttf` 字体文件用于界面设计: ```css /* 定义新的字体 */ @font-face { font-family: 'customIcon'; src: url('https://example.com/fonts/custom-icon.ttf') format('truetype'); } .icon-class { font-family: customIcon; } ``` 另外也可以借助第三方 CDN 来简化流程: ```html <!-- 导入外部样式表 --> <link rel="stylesheet" href="https://cdn.example.org/style.css"> <view class="external-icon"></view> ``` #### 设置未读消息角标 为了增强用户体验,有时还需要给应用程序添加一些额外功能,像通知提醒的小红点之类的东西。这里介绍一款名为 `Ba-Shortcut-Badge` 的插件可以帮助开发者轻松达成这一目标[^4]。它兼容多种主流品牌手机,并提供了简单易懂 API 让我们能够快速集成此特性进入自己的产品之中。 --- ### 总结 综上所述,无论是调整整体外观还是局部装饰都可以依靠上述方法顺利完成。记得每次动之后重新编译构建工程才能看到最终效果哦!
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值