Practical HarmonyOS Sports Development: Creating a Convenient Static Quick Menu

Practical HarmonyOS Sports Development: Creating a Convenient Static Quick Menu

Foreword

In sports applications, users often need to quickly access frequently used functions, such as viewing results, event information, or starting sports. To enhance user experience, HarmonyOS provides the static quick menu feature, which allows users to jump directly to specific pages of the application from the home screen. This article will delve into how to develop a static quick menu based on practical HarmonyOS development experience to achieve the function of quick page jumps.

I. Why We Need a Static Quick Menu

A static quick menu provides users with a way to quickly access specific functions of the application without having to open the application and click multiple times. This is especially important for sports applications, as users may need to quickly start sports mode or view sports data before exercising. With a static quick menu, users can launch these functions directly from the home screen, greatly improving the convenience and user experience of the application.

II. Configuring the Static Quick Menu

1. Configuration File

The configuration file for the static quick menu is located in the base->profile directory. You need to create a shortcuts_config.json file in this directory and define the quick menu items. Below is the core content of the configuration file:

{
  "shortcuts": [
    {
      "shortcutId": "my_scores",
      "label": "$string:shortcut_grades",
      "icon": "$media:icon_shortcut_grades",
      "wants": [
        {
          "bundleName": "package_name",
          "moduleName": "entry",
          "abilityName": "EntryAbility",
          "parameters": {
            "action": "action.view.scores"
          }
        }
      ]
    },
    {
      "shortcutId": "my_events",
      "label": "$string:shortcut_race",
      "icon": "$media:icon_shortcut_race",
      "wants": [
        {
          "bundleName": "package_name",
          "moduleName": "entry",
          "abilityName": "EntryAbility",
          "parameters": {
            "action": "action.view.events"
          }
        }
      ]
    },
    {
      "shortcutId": "start_running",
      "label": "$string:shortcut_sport",
      "icon": "$media:icon_shortcut_sport",
      "wants": [
        {
          "bundleName": "package_name",
          "moduleName": "entry",
          "abilityName": "EntryAbility",
          "parameters": {
            "action": "action.start.running"
          }
        }
      ]
    }
  ]
}

Core Points Analysis

• shortcutId: A unique identifier for each quick menu item.

• label: The display name of the quick menu item, which supports internationalization resources.

• icon: The icon resource for the quick menu item.

• wants: Defines the target page and its parameters to be launched when the quick menu item is clicked.

1. Adding Configuration in the Module’s abilities

Add a reference to the quick menu configuration in the module’s abilities configuration file. Below is the configuration code:

"metadata": [
  {
    "name": "ohos.ability.shortcuts",
    "resource": "$profile:shortcuts_config"
  }
]

Core Points Analysis

• metadata: Defines metadata related to the ability.

• name: The name of the metadata, which is fixed as ohos.ability.shortcuts.

• resource: Points to the path of the quick menu configuration file.

III. Handling Quick Menu Jumps

In EntryAbility, you need to handle the click events of the quick menu items. Through the onNewWant method, you can capture the click events of the quick menu items and jump to the corresponding pages based on the passed parameters. Below is the core code for handling logic:

onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  // Handle shortcut jumps
  if (want.parameters?.action) {
    let action = want.parameters['action'];
    if (action) {
      this.handleShortcutAction(action as string);
    }
  }
}

private handleShortcutAction(action: string): void {
  switch (action) {
    case 'action.view.scores':
      LibNavigator.pushPathByName(SportRouteName.MetronomePage, undefined);
      break;
    case 'action.view.events':
      LibNavigator.pushPathByName(SportRouteName.FileSelectPage, undefined);
      break;
    case 'action.start.running':
      LibNavigator.pushPathByName(SportRouteName.RunningSettingPage, undefined);
      break;
    default:
      entryLogger.warn(`Unknown shortcut action: ${action}`);
  }
}

Core Points Analysis

• onNewWant: When the user clicks a quick menu item, the system calls the onNewWant method.

• want.parameters: Obtain the passed parameters, including the custom action.

• handleShortcutAction: Based on the value of action, call the corresponding page jump logic.

IV. Summary and Outlook

With the static quick menu feature of HarmonyOS, you can provide users with a convenient way to quickly jump to specific functions of the application.