当前位置: 首页 > news >正文

鸿蒙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);
}

实际应用场景

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

  • 高频功能直达:如扫码、支付、发帖等常用功能

  • 特定内容访问:如直接进入购物车、收藏列表、个人中心

  • 操作快捷入口:如新建聊天、开始录音、打开相机

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

注意事项

  1. 配置数量限制:每个应用最多只能配置四个快捷方式

  2. 页面路由配置:确保在 main_pages.json 文件中已添加对应快捷方式页面的路由信息

  3. 参数传递:利用 parameters 字段传递区分不同快捷方式的参数,在 Ability 中解析并跳转到对应页面

  4. 图标和文字规范:遵循鸿蒙系统的设计规范,提供清晰的图标和简洁的文字标签

总结

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

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

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

http://www.dtcms.com/a/478153.html

相关文章:

  • 前端接EXCEL
  • 深圳企业网站建设推荐公司网站开发的方法
  • 网站建设 价格wordpress管理员改为投稿者
  • 2025程序综合实践第三次DFS2
  • 记录一次前端文件缓存问题
  • 深度预测调和网络(DFRN)医疗应用编程路径分析
  • bkhtmltopdf - 高性能 HTML 转 PDF 工具(代替 wkhtmltopdf)
  • OpenCV基础入门2
  • 数据结构——二叉树的从前序与中序遍历序列构造二叉树
  • 做网站要用到的技术网站维护主要做哪些
  • 聚焦string:C++ string 核心接口、编译器差异与自定义实现的深度剖析
  • 【Java集合体系】全面解析:架构、原理与实战选型
  • 999免费的网站北京网站设计方案
  • 复制和粘贴快捷键ctrl加什么?【图文详解】电脑复制粘贴快捷键?剪贴板历史记录?电脑快捷键大全?快捷键操作?
  • 手机网站样式专门做婚庆的网站
  • 知识付费产品:如何与用户建立长期价值共生关系?
  • 操作【GM3568JHF】FPGA+ARM异构开发板 使用指南:音频接口
  • Redis -持久化
  • [css]基础知识和常见应用
  • 电子商务网站的建设费用案例涿州网站建设
  • 企业网站推广哪家公司好惠州网站建设方案外包
  • 容器管理不再受限!PortainerCE+cpolar打造云端数字指挥中心
  • 无人机抗电磁干扰机理与抗干扰技术研究综述
  • Spring Batch 容错机制分析
  • 【C++ Primer】第三章:字符串、向量与数组
  • Allegro X Advanced Designer 23.1 设计约束
  • 【Leetcode hot 100】4.寻找两个正序数组的中位数
  • HTB 赛季9靶场 - Signed
  • 任务栏透明度调节工具
  • 网站企业电子商务网站建设教学计划