Home> Web Front-end> uni-app> body text

How to change the app logo in uniapp

PHPz
Release: 2023-04-25 11:29:47
Original
2887 people have browsed it

With the development of mobile Internet, more and more enterprises and developers have begun to use APP as one of the main ways to interact with users. The APP logo has become one of the important components of the corporate brand image. However, when using the UniApp framework to develop APPs, many developers may encounter the problem of changing the APP logo. This article will introduce you how to easily change the APP logo in UniApp.

1. Preparation work

Before starting to change the APP logo, we need to prepare some basic materials. The first is the APP logo image. It is recommended to use a high-definition image of 500x500 pixels or more to ensure better display effects on devices of different sizes.

Secondly, we need to generate APP logo files of corresponding sizes according to different device resolutions. Typically, different devices have different size requirements. The following are some APP logo specifications on Android and iOS platforms:

  1. Android platform:
Icon type Resolution
Main icon 512x512
Medium icon 192x192
Small icon 144x144
Micro icon 96x96
Notification icon 72x72
  1. iOS platform:
Icon type Resolution
Main icon 1024x1024
App Store 1024x1024
System icon 180x180
Message icon 120x120
Spotlight 80x80
## The above data is for reference only, please proceed according to actual needs generate.

2. How to replace the APP Logo

When replacing the APP logo, there are two methods to choose from, namely manual replacement and automatic replacement. Let’s introduce them separately below.

    Manual replacement
Manual replacement refers to modifying the APP logo file directly in the code. In UniApp, the APP logo is usually saved in the "manifest.json" file in the "unpackage" directory. In order to implement manual replacement, you need to find the "manifest.json" file in the project root directory and open it. In the file, find the "icons" attribute and modify the path of the icon file that needs to be replaced.

Taking the Android platform as an example, we need to change the "/unpackage/android/res/mipmap-xxxhdpi/ic_launcher.png" file path to the new logo icon path.

    Automatic replacement
Automated replacement is to replace the APP logo through tools. For example, we can use some plug-ins or tool libraries to achieve replacement. Here we introduce a commonly used plug-in "uni-plus", which integrates many practical tools and development resources, including the function of changing the APP logo.

In the process of using "uni-plus" for automated replacement, we only need to enter the following command in the terminal:

npm i -g uni-plus
Copy after login
After successful installation, enter the following command in the project root directory for automation Just replace:

upx icon
Copy after login
In addition, if you are using the debugger that comes with uni-app, you can also automatically update the APP logo through the debugger.

Find the "Mini Program Settings" icon on the left side of the debugger, enter the "Quick Configuration" - "APP Icon" page, you can easily upload or select a new APP logo image on the page, and the debugger will Automatically update new icons to devices.

3. Summary

In this article, we introduce how to easily change the APP logo in the UniApp framework. Whether it is manual replacement or automatic replacement using tools, you need to have a certain understanding of the APP logo and do a good job of adapting it to different devices. Only in this way can we ensure that the display effect of the APP logo is optimal when using different devices.

Each version of the UniApp framework will launch new features for different needs, and the method of changing the APP logo is also constantly updated. Therefore, it is recommended that developers regularly pay attention to and update the stable version of UniApp in order to keep up with the latest technology and tool.

The above is the detailed content of How to change the app logo in uniapp. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!