Harmony changes the name and icon of the APP

How to Change APP Name, Icon, and Configure Network Settings

When developing an application (APP), changing its name, icon, and configuring network access are common requirements. These modifications can enhance the user experience and ensure that your APP functions correctly in different environments. Below are detailed steps to guide you through these processes.

Changing APP Name

Step-by-Step Guide

1. Open Project:

   • Launch your development environment and open your project. Navigate to the module.json5 file, which is typically located in the entry->src->main directory.

2. Modify Name:

   • Locate the abilities node within the module.json5 file. Under this node, find the label field. The value attribute of this field represents your APP's name.
   • Update the value for all relevant pages to reflect the new name. For example:

    "abilities": [
        {
            "label": {
                "value": "NewAppName"
            },
            ...
        }
    ]
   

• If your APP has multiple pages or abilities, ensure that you update the label field for each one to maintain consistency across the APP.

1. Restart APP:
   • Save the changes to the module.json5 file.
   • Restart the APP to see the new name reflected in the system.

Additional Tips

• Localization: If your APP supports multiple languages, you may need to update the label field in different language configurations. This ensures that the APP name is correctly displayed in various locales.
• Dynamic Names: In some cases, you might want to dynamically change the APP name based on user settings or other conditions. This can be achieved through code, but it requires additional permissions and handling.

Changing APP Icon

Step-by-Step Guide

1. Locate Icon File:

   • Find the layered_image.json file in your project. This file defines the APP icon and is typically located in the entry->src->main->resources->base->media directory.

2. Update Icon:

   • Open the layered_image.json file.
   • Replace or modify the icon path with the path to your new icon. Ensure that the new icon is in the correct format (e.g., PNG) and meets the required dimensions.
   • For example:

    {
        "layers": [
            {
                "image": "media/new_icon.png"
            }
        ]
    }
   

3. Check Result:

   • Save the changes to the layered_image.json file.
   • Recompile and run the APP to view the new icon.

Additional Tips

• Icon Sizes: Ensure that your icon is available in multiple sizes to support different device resolutions and display densities.
• Adaptive Icons: For a more modern look, consider using adaptive icons that can display differently based on the device's theme or settings.

Configuring Network Access

Step-by-Step Guide

1. Open module.json5:

   • Access the module.json5 file in the entry->src->main folder.

2. Add Network Permission:

   • Include the following configuration to enable network access:

    "module": {
        "reqPermissions": [
            {
                "name": "ohos.permission.INTERNET"
            }
        ]
    }
   

• This configuration grants your APP the necessary permissions to access the internet.

1. Test Network Functionality:
   • Save the changes to the module.json5 file.
   • Run the APP and verify that network access works properly. You can test this by implementing a simple network request (e.g., fetching data from an API) and checking the response.

Additional Tips

• Network Security: Ensure that your APP handles network data securely, especially if it involves sensitive information. Use HTTPS for all network requests and consider implementing additional security measures such as SSL pinning.
• Error Handling: Implement robust error handling for network operations. This includes handling cases where the network is unavailable or the request fails.
• Permissions Management: Be mindful of the permissions you request. Only request the permissions that are absolutely necessary for your APP's functionality to avoid unnecessary access to user data.

Example Code

Changing APP Name

"abilities": [
    {
        "label": {
            "value": "NewAppName"
        },
        ...
    }
]

Changing APP Icon

{
    "layers": [
        {
            "image": "media/new_icon.png"
        }
    ]
}

Configuring Network Access

"module": {
    "reqPermissions": [
        {
            "name": "ohos.permission.INTERNET"
        }
    ]
}

Conclusion

Modifying the APP name, icon, and configuring network access are essential tasks in APP development. By following the steps outlined above, you can easily update these settings to enhance the user experience and ensure that your APP functions correctly. Remember to test your changes thoroughly to avoid any issues. If you have any further questions or need additional assistance, feel free to leave a comment.