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