企业官网建设流程全解析

概述

FormMenu 包含AddFormMenuItem菜单子组件，可嵌入上下文菜单中，实现长按组件弹出菜单，快速将应用服务卡片添加至系统桌面。支持自定义菜单文案、图标，可传递业务数据给桌面卡片，同时监听卡片添加结果回调，常用于快捷功能桌面置顶场景。

引入依赖

import { AddFormMenuItem } from '@kit.ArkUI'; import { formBindingData } from '@kit.FormKit'; import { hilog } from '@kit.PerformanceAnalysisKit';

核心参数

1. Want 卡片基础配置

2. componentId

绑定触发菜单的组件唯一标识，需和页面组件id属性严格对应。

3. 卡片拓展配置项

4. 触发方式

通过bindContextMenu绑定长按手势，长按指定组件唤起添加卡片菜单。

功能解析

1. 状态与标识定义

定义提示文本与组件唯一ID，作为菜单绑定标识。

@State textTip: string = '长按我试试看'; private targetComponentId: string = 'customCardTargetId';

2. 菜单结构构建

使用@Builder构建上下文菜单，内部放置AddFormMenuItem，依次配置卡片归属信息、绑定组件ID、数据传参、回调监听与菜单样式。

@Builder customAddMenu() { Menu() { AddFormMenuItem(卡片配置,组件ID,拓展配置) } }

3. 页面组件绑定

给文本组件设置匹配ID，绑定长按唤起菜单事件，完成交互挂载。

4. 结果日志监听

回调函数内通过日志打印添加状态，区分成功与异常场景，便于调试排查问题。

业务代码

import { AddFormMenuItem } from '@kit.ArkUI'; import { formBindingData } from '@kit.FormKit'; import { hilog } from '@kit.PerformanceAnalysisKit'; @Entry @Component struct Index { @State textTip: string = '长按我试试看'; private targetComponentId: string = 'customCardTargetId'; // 自定义添加卡片菜单 @Builder customAddMenu() { Menu() { AddFormMenuItem( { bundleName: 'com.example.customformdemo', abilityName: 'EntryFormAbility', parameters: { 'ohos.extra.param.key.form_dimension': 2, 'ohos.extra.param.key.form_name': 'demo_card', 'ohos.extra.param.key.module_name': 'entry' } }, this.targetComponentId, { formBindingData: formBindingData.createFormBindingData({ title: '自定义卡片标题', content: '这是卡片显示内容' }), callback: (error, formId) => { if (error?.code === 0) { hilog.info(0x0001, 'FormDemo', '✅ 添加卡片成功'); } else { hilog.error(0x0001, 'FormDemo', '❌ 添加失败：%{public}s', JSON.stringify(error)); } }, style: { options: { content: '添加到桌面', startIcon: $r('sys.media.AI_play') } } } ) } } build() { Row() { Column() { Text(this.textTip) .id(this.targetComponentId) .fontSize(22) .backgroundColor('#F5F5F5') .padding(20) .borderRadius(12) .bindContextMenu(this.customAddMenu, ResponseType.LongPress) } .width('100%') .height('100%') .justifyContent(FlexAlign.Center) } .width('100%') .height('100%') } }

运行效果：

长按弹出按钮：

使用操作流程

1. 配置工程卡片相关能力、包名与卡片实体页面；
2. 定义触发组件唯一ID，保证菜单与组件ID一一对应；
3. 编写菜单布局，配置卡片基础信息、传递展示数据；
4. 自定义菜单文字与图标样式，绑定添加结果回调；
5. 绑定长按触发手势，编译运行；
6. 长按页面文本，点击菜单选项即可添加桌面卡片。

总结

1. 适配API 11及以上版本，仅支持Stage应用模型；
2. 包名、能力名、卡片名称必须与项目配置一致，否则添加失效；
3. 组件ID全局唯一，菜单绑定ID与组件ID不可错乱；
4. 支持自定义菜单图标与文案，适配应用整体视觉风格；
5. 通过回调捕获添加异常，可拓展弹窗提示用户操作结果。

如果这篇文章对你有帮助，欢迎点赞、收藏、关注，你的支持是持续创作的动力