鸿蒙NEXT应用接入快捷栏：一键直达，提升用户体验

还在让用户在多级菜单中寻找常用功能？应用快捷栏正是提升用户体验的解决方案。

在移动应用功能日益复杂的今天，让用户快速访问核心功能成为提升用户体验的关键。鸿蒙NEXT通过应用快捷栏功能，让用户能够一键直达应用内的特定功能，大大提高了操作效率。

快捷栏是什么？

应用快捷栏是鸿蒙系统中一种可以快速访问应用程序或特定功能的链接。用户通过长按应用图标即可唤出快捷方式，直接跳转到应用内的某个功能页面，无需先打开应用再逐级寻找。

与卡片的区别在于：快捷方式只允许跳转至某个具体的UIAbility，无法直接跳转至非入口页面，且最多可以配置四个快捷方式。

如何配置应用快捷栏

1. 创建快捷方式配置文件

首先，在 /resources/base/profile/ 目录下创建名为 shortcuts_config.json 的文件，定义应用快捷方式的相关配置。

json

复制代码

{
  "shortcuts": [
    {
      "shortcutId": "id_Scan",
      "label": "$string:Go_to_the_Scan",
      "icon": "$media:scan",
      "wants": [
        {
          "bundleName": "com.example.desktopshortcuts",
          "moduleName": "entry",
          "abilityName": "EntryAbility",
          "parameters": {
            "shortCutKey": "ScanPage"
          }
        }
      ]
    },
    {
      "shortcutId": "id_Camera",
      "label": "$string:Go_to_Camera",
      "icon": "$media:camera",
      "wants": [
        {
          "bundleName": "com.example.desktopshortcuts",
          "moduleName": "entry",
          "abilityName": "EntryAbility",
          "parameters": {
            "shortCutKey": "CameraPage"
          }
        }
      ]
    }
  ]
}

配置字段说明：

shortcutId：快捷方式的唯一标识，字符串长度不超过63字节
label：快捷方式显示的文字描述
icon：快捷方式的图标
wants：目标信息集合，包含包名、模块名、组件名和自定义参数

2. 修改 module.json5 配置文件

在 module.json5 配置文件中的 abilities 标签下的 metadata 中设置 resource 属性值为 $profile:shortcuts_config，指定应用的快捷方式配置文件。

json

复制代码

{
  "module": {
    // ...
    "abilities": [
      {
        "name": "EntryAbility",
        "srcEntry": "./ets/entryability/EntryAbility.ets",
        // ...
        "skills": [
          {
            "entities": [
              "entity.system.home"
            ],
            "actions": [
              "ohos.want.action.home"
            ]
          }
        ],
        "metadata": [
          {
            "name": "ohos.ability.shortcuts",
            "resource": "$profile:shortcuts_config"
          }
        ]
      }
    ]
  }
}

3. 实现页面跳转逻辑

在 EntryAbility.ets 文件中，我们需要定义跳转到指定页面的方法，通过解析 Want 参数中的 shortCutKey 来判断用户使用了哪种快捷方式。

typescript

复制代码

goToSpecifyPage(want: Want) {
  let shortCutKey = want.parameters?.shortCutKey;

  if (this.uiContext && shortCutKey && shortCutKey === 'ScanPage') {
    let router: Router = this.uiContext.getRouter();
    router.pushUrl({
      url: 'pages/GoScan'
    }).catch((err: BusinessError) => {
      hilog.error(0x0000, 'testTag', `Failed to push url. Code is ${err.code},message is ${err.message}`);
    });
  }
  if (this.uiContext && shortCutKey && shortCutKey === 'CameraPage') {
    let router: Router = this.uiContext.getRouter();
    router.pushUrl({
      url: 'pages/GoCamera'
    }).catch((err: BusinessError) => {
      hilog.error(0x0000, 'testTag', `Failed to push url. Code is ${err.code},message is ${err.message}`);
    });
  }
}

4. 调用跳转方法

最后，在 EntryAbility.ets 文件中的 onNewWant() 或 onCreate() 函数中调用 goToSpecifyPage() 方法，并将 want 作为参数传入。

typescript

复制代码

onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {
  this.goToSpecifyPage(want);
}

实际应用场景

应用快捷栏特别适合以下场景：

高频功能直达：如扫码、支付、发帖等常用功能
特定内容访问：如直接进入购物车、收藏列表、个人中心
操作快捷入口：如新建聊天、开始录音、打开相机

以微信为例，可以通过配置快捷方式实现一键扫码、发起聊天等操作，极大提升用户体验。

注意事项

配置数量限制：每个应用最多只能配置四个快捷方式
页面路由配置 ：确保在 main_pages.json 文件中已添加对应快捷方式页面的路由信息
参数传递：利用 parameters 字段传递区分不同快捷方式的参数，在 Ability 中解析并跳转到对应页面
图标和文字规范：遵循鸿蒙系统的设计规范，提供清晰的图标和简洁的文字标签

总结

鸿蒙NEXT的应用快捷栏功能为开发者提供了一种简单有效的方式，让用户能够快速访问应用内的核心功能。通过合理的配置和使用，不仅可以提升用户体验，还能增加功能的曝光度和使用率。

在应用日益复杂的今天，减少用户操作步骤，一键直达核心功能，无疑是提升应用竞争力的有效策略。

希望本篇博客能帮助你快速掌握鸿蒙NEXT应用快捷栏的开发方法，如有任何问题，欢迎在评论区留言讨论。