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.

1. Modify the application icon

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.

1. Create a resource directory

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:

• Android: 192 x 192, 144 x 144, 96 x 96, 72 x 72, 48 x 48, 36 x 36
• iOS: 1024 x 1024, 180 x 180, 152 x 152, 120 x 120, 87 x 87, 80 x 80, 76 x 76, 58 x 58, 40 x 40, 29 x 29

2. Set the icon path

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"
        }
    ]
}

3. Introduce the icon configuration file

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",

4. Compile and publish the application

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.

2. Modify the application name

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.

1. Set the application name

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",
    ...
}

2. Compile and publish the application

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.

Conclusion

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!