写点什么

鸿蒙 Next 应用桌面快捷操作 shortcuts 和 Form 卡片介绍

作者:auhgnixgnahz
  • 2025-06-25
    北京
  • 本文字数:3429 字

    阅读完需:约 11 分钟

当我们长按桌面应用图标时,会弹出一个列表选项,除了系统自带的卸载之外,还有一些自定义的快捷功能,可以帮我们快速打开指定的页面。还有自定义卡片,可以添加到桌面,展示一些信息,也可以快速打开指定的页面。这一篇,介绍一下这两个快捷方式的使用方法。


shortcuts 标签和桌面动态卡片,都可以通过 router 打开指定的 ability,设置参数,打开我们设定的页面,包括冷启动、热启动的处理,下面会介绍。


先看一下实现效果:



shortcuts 标签

1.在/resources/base/profile/目录下新建一个 shortcuts_config.json 配置文件。配置参数说明如下:


{  "shortcuts": [    {      "shortcutId": "id_test1",   标识快捷方式的ID      "label": "$string:shortcut1",  快捷方式对外显示的文字描述信息      "icon": "$media:user_icon_lang", 快捷方式的图标      "wants": [        {          "bundleName": "com.hmos", 包名          "moduleName": "entry", 目标模块名          "abilityName": "EntryAbility", 目标组件名          "parameters": {     自定义数据            "type": "shortcut",       和卡片的跳转或者其他跳转 做一个区分            "router": "view/Publish"    这个是路由,我们拿到这个参数直接跳转          }        }      ]    },    {      "shortcutId": "id_test2",      "label": "$string:shortcut2",      "icon": "$media:map_tab4_sel",      "wants": [        {          "bundleName": "com.hmos.study",          "moduleName": "entry",          "abilityName": "EntryAbility",          "parameters": {            "type": "shortcut",            "router": "view/AVRecorderTest"          }        }      ]    }  ]}
复制代码


2.在 module.json5 配置文件的 abilities 标签中,配置 metadata 标签,使 shortcut 配置文件对该 UIAbility 生效。


"abilities": [      {        "name": "EntryAbility",        "srcEntry": "./ets/entryability/EntryAbility.ets",        "description": "$string:EntryAbility_desc",        "startWindowIcon": "$media:startIcon",        "startWindowBackground": "$color:start_window_background",        "exported": true,        "skills": [          {            "entities": [              "entity.system.home"            ],            "actions": [              "action.system.home"            ]          }        ],        "metadata": [          {            "name": "ohos.ability.shortcuts",            "resource": "$profile:shortcuts_config"   这里引用上一步我们配置的文件          }        ]      }    ],
复制代码


3.到这里,在桌面长按图标就可以展示配置的快捷按钮了,并且点击可以打开应用,接下来配置一下 router,跳转到我们想要打开的页面


4.处理冷启动情况,冷启动时,ability 走的生命周期函数是 onCreate()->onWindowStageCreate(),我们在**onCreate()中获取到 want 实例,然后在 onWindowStageCreate()**回调中处理 want 参数


 let url = 'pages/SplashPage';    //shortcuts跳转处理    if (this.abilityWant?.parameters?.router && this.abilityWant.parameters.type === 'shortcut') {//获取到配置文件中设置的路由      url = this.abilityWant.parameters.router.toString();    }windowStage.loadContent(url, (err) => { //实例化uicontext  this.uiContext= windowStage.getMainWindowSync().getUIContext()...});
复制代码


5.处理热启动情况,当应用的 UIAbility 实例已创建,再次调用 startAbility()方法启动该 UIAbility 实例时,只会进入该 UIAbility 的**onNewWant()**回调,不会进入其 onCreate()和 onWindowStageCreate()生命周期回调。


onNewWant(want: Want, launchParam: AbilityConstant.LaunchParam): void {    //shortcuts跳转处理    if (want?.parameters?.router && want.parameters.type === 'shortcut') {      let  url =  want.parameters.router.toString();      if (this.uiContext) {        let router: Router = this.uiContext.getRouter();        router.pushUrl({          url: url        }).catch((err: BusinessError) => {
}); } } }
复制代码


6.到这里,点击快捷按钮,可以打开我们想要展示的页面了,但是会发现,按返回键直接退出到桌面,再点应用图标,还是刚才那个页面,去不到主页面了,接下来,我们处理一下目标页面的返回事件,返回键和返回按钮处理一样。


  onBackPress() {    if(router.getLength()=='1'){   //如果当前页面不是主页面并且是栈顶,就直接打开主页      router.replaceUrl({url:'pages/MainPage'})    }else {                 //这里相当于是热启动,返回主页面      router.back({url:'pages/MainPage'})    }    return true  }
复制代码
Form 卡片

1.创建卡片,右键 entry 添加动态卡片



2.按照步骤依次填写完成之后,编译器会自动帮我们生成 3 个文件,接下来,依次介绍。


3.profile/form_config.json ,卡片配置文件,参数说明如下:


{  "forms": [  最多支持配置16个卡片    {      "name": "cardTest",  表示卡片的名称 不显示      "displayName": "$string:cardTest_display_name", 卡片的展示名称      "description": "$string:cardTest_desc",表示卡片的描述      "src": "./ets/cardtest/pages/CardTest.ets",卡片对应的UI代码的完整路径      "uiSyntax": "arkts",片的类型 缺省值为“hml”      "window": {        "designWidth": 720, 页面设计基准宽度        "autoDesignWidth": true  宽度是否自动计算      },      "colorMode": "auto", 主题样式 auto:跟随系统      "isDynamic": true,是否为动态卡片  动态可点击跳转      "isDefault": true,是否为默认卡片  每个UIAbility有且只有一个默认卡片      "updateEnabled": false,  卡片是否支持周期性刷新      "scheduledUpdateTime": "10:30", 定点刷新的时刻,采用24小时制,精确到分钟      "updateDuration": 1, 卡片定时刷新的更新周期,单位为30分钟,取值为自然数。      "defaultDimension": "1*2",  默认外观规格      "supportDimensions": [  卡片支持的外观规格 12 22 24 44 64         "1*2"      ],      "supportShapes":表示卡片的显示形状 目前好像默认只支持方形,圆形不起作用    }  ]}
复制代码


4.上面配置参数中./ets/cardtest/pages/CardTest.ets 的 CardTest 是桌面展示卡片页面文件,配置卡片样式和点击事件


@Entry@Componentstruct CardTestCard {  build() {    Row() {      Column() {        Text(BASE_ROUTER_DATA[BASE_ROUTER_DATA.length-1].pageName)          .fontSize(14)          .fontWeight(FontWeight.Medium)          .fontColor($r('sys.color.font_primary'))      }      .width('100%')    }    .height('100%')    .onClick(() => {//用于卡片内部和提供方应用间的交互,当前支持router、message和call三种类型的事件,仅在卡片中可以调用。      postCardAction(this, {        action: 'router',        abilityName:'EntryAbility',        params: {//传入 router 参数 和上面的 shortcuts传参一样          router: BASE_ROUTER_DATA[BASE_ROUTER_DATA.length-1].pageRouter        }      });    })  }}
复制代码


5.在 EntryAbility 中处理冷启动和热启动 router 跳转


 //冷启动卡片跳转处理    if (this.abilityWant?.parameters?.params) {      let params: Record<string, object> = JSON.parse(this.abilityWant?.parameters.params as string);      url = params.router as string;    }    //热启动卡片跳转处理    if (want?.parameters?.params) {      let params: Record<string, object> = JSON.parse(want?.parameters.params as string);      let  url = params.router as string;      if (this.uiContext) {        let router: Router = this.uiContext.getRouter();        router.pushUrl({          url: url        }).catch((err: BusinessError) => {               });      }    }</string, object></string, object>
复制代码


6.处理目标页面的返回事件


发布于: 刚刚阅读数: 4
用户头像

auhgnixgnahz

关注

还未添加个人签名 2018-07-10 加入

欢迎关注:HarmonyOS开发笔记

评论

发布
暂无评论
鸿蒙Next应用桌面快捷操作shortcuts和Form卡片介绍_鸿蒙Next_auhgnixgnahz_InfoQ写作社区