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

当我们长按桌面应用图标时，会弹出一个列表选项，除了系统自带的卸载之外，还有一些自定义的快捷功能，可以帮我们快速打开指定的页面。还有自定义卡片，可以添加到桌面，展示一些信息，也可以快速打开指定的页面。这一篇，介绍一下这两个快捷方式的使用方法。 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
@Component
struct 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) => {
       
        });
      }
    }

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