How to change the app logo in uniapp

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

2. 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

After successful installation, enter the following command in the project root directory for automation Just replace:

upx icon

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!