鸿蒙(HarmonyOS)应用开发实战——Web自定义长按菜单案例

往期推文全新看点

• 学鸿蒙开发的优劣势，你清楚吗？建议你了解一下！
• 鸿蒙（HarmonyOS）北向开发知识点记录~
• 鸿蒙（OpenHarmony）南向开发保姆级知识点汇总~
• 鸿蒙应用开发与鸿蒙系统开发哪个更有前景？
• 嵌入式开发适不适合做鸿蒙南向开发？看完这篇你就了解了~
• 对于大前端开发来说，转鸿蒙开发究竟是福还是祸？
• 鸿蒙岗位需求突增！移动端、PC端、IoT到底该怎么选？
• 记录一场鸿蒙开发岗位面试经历~
• 持续更新中……

介绍

本示例介绍了给Webview页面中可点击元素（超链接/图片）绑定长按/鼠标右击时的自定义菜单的方案。

效果预览图

使用说明

长按Web页面中的图片或者链接元素，弹出自定义的Menu菜单，创建自定义的操作，如复制图片、使用浏览器打开链接、复制链接等。

实现思路

1. 创建Web组件，导入示例HTML文件，绑定弹出菜单组件。

Web({
    src: $rawfile("index.html"), controller: this.controller })
  .bindPopup(this.showMenu,
    {
   
      builder: this.MenuBuilder(),
      enableArrow: false,
      placement: Placement.LeftTop,
      mask: false,
      onStateChange: (e) => {
   
        if (!e.isVisible) {
   
          this.showMenu = false;
          this.result!.closeContextMenu();
        }
      }
    })

2. 调用Web组件的onContextMenuShow函数，获取当前页面元素弹窗菜单的信息，如位置信息、当前链接、以及是否存在图片等媒体元素、获取事件来源等。同时也获取弹出菜单的响应事件，用于处理前面获取到的菜单信息，如复制图片、全选、剪切、关闭菜单等。

// TODO: 知识点: 长按或者鼠标右键触发该事件，当前只对图片、链接有效。
.onContextMenuShow((event) => {
   
  if (event) {
   
    this.result = event.result;
    this.param = event.param;
    logger.info(TAG, "x coord = " + event.param.x());
    logger.info(TAG, "y coord = " + event.param.y(