Home >Web Front-end >uni-app >How to change the icon and name of uniapp
As a cross-platform development framework, Uniapp is very practical and convenient, and can help developers quickly create multi-platform applications. For developers who often develop applications, it is very necessary to master the UniApp framework. During the development process, we often need to make some basic settings for the application, such as changing the application icon and name. This article will introduce how to modify the application icon and name in UniApp.
The application icon in UniApp refers to the icon displayed on the home screen of the mobile device, which is a very important part. The icon of an application can not only reflect the characteristics of the application, but also enhance the user experience. Let’s introduce how to modify the application icon in UniApp.
First, we need to create a uni-icons directory in the root directory to store application icons. In the uni-icons directory, we need to create 4 icons of different sizes.
Note: The icon size should be set according to the following proportions to ensure normal display on different devices:
In the uni-icons directory, create a manifest.json file to describe the configuration information of the application icon. In this file, we need to configure the path, type, size and other information of the icon. The sample code is as follows:
{ "appIcons": [ { "path": "uni-icons/android/android-launchericon-192-192.png", "width": "192", "height": "192", "backgroundColor": "#FFFFFF" }, { "path": "uni-icons/android/android-launchericon-144-144.png", "width": "144", "height": "144", "backgroundColor": "#FFFFFF" }, { "path": "uni-icons/android/android-launchericon-96-96.png", "width": "96", "height": "96", "backgroundColor": "#FFFFFF" }, { "path": "uni-icons/android/android-launchericon-72-72.png", "width": "72", "height": "72", "backgroundColor": "#FFFFFF" }, { "path": "uni-icons/android/android-launchericon-48-48.png", "width": "48", "height": "48", "backgroundColor": "#FFFFFF" }, { "path": "uni-icons/android/android-launchericon-36-36.png", "width": "36", "height": "36", "backgroundColor": "#FFFFFF" } ] }
In the manifest.json file of UniApp, we need to introduce the manifest.json file created before. In the manifest.json file, we can see the following code:
{ "plus": { "usingComponents": true }, "app-plus": { "usingComponents": true, "iconPath": "", "iconType": "" } }
We need to set the path to the icon file in the iconPath field, as shown below:
"iconPath": "./uni-icons/manifest.json",
After completing the above steps, you need to recompile and publish the application. After recompiling the application, we can see that the application's icon has been modified. On different devices, we can see that the application icon is displayed correctly.
The name of the application refers to the application name displayed on the home screen of the mobile device. The purpose of modifying the application name is generally to better display the application name and make it easier for users to identify the application. Let’s introduce how to modify the application name in UniApp.
In UniApp, we can find the application name setting item in the manifest.json file. In this file, we need to modify the name attribute to modify the application name. The sample code is as follows:
{ "name": "My App", "version": "1.0.0", "description": "A simple app", ... }
After modifying the application name, you need to recompile and publish the application. After recompiling the application, we can see that the application name has been modified. On different devices, we can see that the app name is also displayed correctly.
The above is a simple method to modify the application icon and name in UniApp. Mastering these two skills allows us to better customize applications and improve user experience. I hope this article can help all developers.
The above is the detailed content of How to change the icon and name of uniapp. For more information, please follow other related articles on the PHP Chinese website!