OpenHarmony实战开发-Web自定义长按菜单案例。

介绍

本示例介绍了给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());
    logger.info(TAG, "link url = " + event.param.getLinkUrl())
    this.linkUrl = event.param.getLinkUrl();
    this.inputType = this.param.getInputFieldType();
  }
  logger.info(TAG, TAG, `x: ${this.offsetX}, y: ${this.offsetY}`);
  this.showMenu = true;
  return true;
})

3.创建自定义菜单。在onContextMenuShow事件中能够获取触发菜单元素的信息和事件，根据这些内容动态创建自定义的弹出菜单。

Menu() {
  // 如果元素存在图片
  if (this.param?.existsImageContents()) {
    MenuItem({
      content: $r('app.string.copy_image'),
    })
      .onClick(() => {
        this.result?.copyImage();
        this.showMenu = false;
      })
  }
  // 如果元素可剪切
  if (this.param?.getEditStateFlags() === ContextMenuEditStateFlags.CAN_CUT) {
    MenuItem({
      content: $r('app.string.cut'),
    })
      .onClick(() => {
        this.result?.cut();
        this.showMenu = false;
      })
  }
  // 如果元素可拷贝
  if (this.param?.getEditStateFlags() === ContextMenuEditStateFlags.CAN_PASTE) {
    MenuItem({
      content: $r('app.string.copy'),
    })
      .onClick(() => {
        this.result?.copy();
        this.showMenu = false;
      })
  }
  // 如果元素可粘贴
  if (this.param?.getEditStateFlags() === ContextMenuEditStateFlags.CAN_PASTE) {
    MenuItem({
      content: $r('app.string.paste'),
    })
      .onClick(() => {
        this.result?.paste();
        this.showMenu = false;
      })
  }
  // 如果元素可全选
  if (this.param?.getEditStateFlags() === ContextMenuEditStateFlags.CAN_PASTE) {
    MenuItem({
      content: $r('app.string.select_all'),
    })
      .onClick(() => {
        this.result?.selectAll();
        this.showMenu = false;
      })
  }
  // 如果元素为链接
  if (this.linkUrl) {
    // 浏览器打开链接
    MenuItem({
      content: $r('app.string.open_link'),
    })
      .onClick(() => {
        let wantInfo: Want = {
          action: 'ohos.want.action.viewData',
          entities: ['entity.system.browsable'],
          uri: this.linkUrl
        };
        this.context.startAbility(wantInfo).then(() => {
          logger.info(TAG, 'startAbility succeed');
        }).catch((err: BusinessError) => {
          logger.error(TAG, `startAbility failed, code is ${err.code}, message is ${err.message}`);
          return;
        });
        this.showMenu = false;
      })
    // 复制链接
    MenuItem({
      content: $r('app.string.copy_link'),
    })
      .onClick(() => {
        let pasteData = pasteboard.createData('text/plain', this.linkUrl);
        pasteboard.getSystemPasteboard().setData(pasteData, (error) => {
          if (error) {
            logger.error(TAG, 'Failed to set PasteData. Cause: ' + error.message);
            return;
          }
          logger.info(TAG, 'Succeeded in setting PasteData.');
        });
        this.showMenu = false;
      })
  }
  // 判断是否输入框
  if (this.inputType != ContextMenuInputFieldType.None) {
    MenuItem({
      content: $r('app.string.input_field'),
    })
      .onClick(() => {
        this.showMenu = false;
      })
  }
}

因为不同元素触发的弹窗宽高尺寸不一样，还需要根据手指按压位置和弹窗尺寸选择弹窗显示的位置。

let offset: Position = { x: 0, y: 0};
if (this.pressPosX <= this.webWidth / 2) {
  offset.x = -(this.webWidth / 2 - this.pressPosX) + popupWidth / 2 + FINGER_OFFSET_X;
} else {
  offset.x = -(this.webWidth / 2 - this.pressPosX) - popupWidth / 2 - FINGER_OFFSET_X;
}
if (this.pressPosY <= this.webHeight / 2) {
  offset.y = -(this.webHeight / 2 - this.pressPosY) + popupHeight / 2 + FINGER_OFFSET_Y;
} else {
  offset.y = (this.pressPosY - this.webHeight / 2) - popupHeight / 2 - FINGER_OFFSET_Y;
}
logger.debug(TAG, `popup offset: ${offset.x}, ${offset.y}`);
return offset;
}

高性能知识点

  • 本案例使用了Webview控制器的initializeWebEngine接口提前加载Web引擎的动态库文件，从而提前进行Web组件动态库的加载和Web内核主进程的初始化，最终以提高启动性能，减少白屏时间。
  • 本案例使用了系统高频回调事件onAreaChange，应避免在该回调中调用冗余和耗时操作。

工程结构&模块类型

webcustompressmenu      // HAR类型
  ├─mainpage
  │ └─MainPage.ets      // ArkTS页面
  ├─rawfile
  │ └─index.html        // HTML页面

模块依赖

  • utils
  • routermodule

如果大家还没有掌握鸿蒙，现在想要在最短的时间里吃透它，我这边特意整理了《鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程》以及《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

鸿蒙语法ArkTS、TypeScript、ArkUI等…视频教程：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

OpenHarmony APP开发教程步骤：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

《鸿蒙开发学习手册》：

如何快速入门：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3.……
在这里插入图片描述

开发基础知识：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
9.……
在这里插入图片描述

基于ArkTS 开发：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
16.……
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF：https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/558908.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

定时器详解

定时器详解

定时器&#xff1a;Timer类 常用方法方法&#xff1a; 1.schedule(TimeTask timetask,long delay,(long period)): TimeTask&#xff1a;实现了Runnable类&#xff0c;实现时需要重写run方法 delay&#xff1a;表示延迟多少(decay)后开始执行任务&#xff0c;单位是毫秒&#x…
阅读更多...
密码学 | 椭圆曲线密码学 ECC 入门（四）

密码学 | 椭圆曲线密码学 ECC 入门（四）

目录 正文 1 曲线方程 2 点的运算 3 求解过程 4 补充&#xff1a;有限域 ⚠️ 知乎&#xff1a;【密码专栏】动手计算双线性对&#xff08;中&#xff09; - 知乎 ⚠️ 写在前面&#xff1a;本文属搬运博客&#xff0c;自己留着学习。注意&#xff0c;这篇博客与前三…
阅读更多...
LeetCode in Python 200. Number of islands (岛屿数量)

LeetCode in Python 200. Number of islands (岛屿数量)

岛屿数量既可以用深度优先搜索也可以用广度优先搜索解决&#xff0c;本文给出两种方法的代码实现。 示例&#xff1a; 图1 岛屿数量输入输出示意图 方法一&#xff1a;广度优先搜索(bfs) 代码&#xff1a; class Solution:def numIslands(self, grid):if not grid:return 0…
阅读更多...
【WSL报错】执行:wsl --list --online；错误:0x80072ee7

【WSL报错】执行:wsl --list --online；错误:0x80072ee7

【WSL报错】执行:wsl --list --online&#xff1b;错误:0x80072ee7 问题情况解决方法详细过程 问题情况 C:\Users\17569>wsl --list --online 错误: 0x80072ee7 解决方法 开系统代理&#xff0c;到外网即可修复&#xff01;&#xff01;&#xff01;&#xff01;&#x…
阅读更多...
Yolov8项目实践——基于yolov8与OpenCV实现目标物体运动热力图

Yolov8项目实践——基于yolov8与OpenCV实现目标物体运动热力图

概述 在数据驱动和定位的世界中&#xff0c;对数据进行解释、可视化和决策的能力变得日益重要。这表明&#xff0c;使用正确的工具和技术可能是项目成功的关键。在计算机视觉领域&#xff0c;存在许多技术来解释从视频&#xff08;包括录像、流媒体或实时视频&#xff09;中获…
阅读更多...
「 网络安全常用术语解读 」软件成分分析SCA详解：从发展背景到技术原理再到业界常用检测工具推荐

「 网络安全常用术语解读 」软件成分分析SCA详解：从发展背景到技术原理再到业界常用检测工具推荐

软件成分分析&#xff08;Software Composition Analysis&#xff0c;SCA&#xff09;是一种用于识别和分析软件内部组件及其关系的技术&#xff0c;旨在帮助开发人员更好地了解和管理其软件的构建过程&#xff0c;同时可帮助安全人员揭秘软件内部结构的神秘面纱。SCA技术的发展…
阅读更多...
递归、搜索与回溯算法：回溯，决策树

递归、搜索与回溯算法：回溯，决策树

回溯算法是⼀种经典的递归算法&#xff0c;通常⽤于解决组合问题、排列问题和搜索问题等。 回溯算法的基本思想&#xff1a;从⼀个初始状态开始&#xff0c;按照⼀定的规则向前搜索&#xff0c;当搜索到某个状态⽆法前进时&#xff0c;回退到前⼀个状态&#xff0c;再按照其他…
阅读更多...
【计算机组成原理】运算方法和运算器

【计算机组成原理】运算方法和运算器

数据与文字的表示方法 1. 数据格式1.1 定点数表示方法1.1.1 定点小数1.1.2 定点整数 1.2 浮点数表示方法1.2.1 浮点数表示1.2.2 浮点数的规格化1.2.2.1 尾数为原码表示的规格化1.2.2.2 尾数为补码表示的规格化 1.2.3 IEEE754标准⭐ 1.3 十进制数串的表示方法1.3.1 字符串形式1.…
阅读更多...
网盘——私聊

网盘——私聊

在私聊这个功能实现中&#xff0c;具体步骤如下&#xff1a; 1、实现步骤&#xff1a; A、客户端A发送私聊信息请求&#xff08;发送的信息包括双方的用户名&#xff0c;聊天信息&#xff09; B、如果双方在线则直接转发给B&#xff0c;不在线则回复私聊失败&#xff0c;对方…
阅读更多...
ProgressFlowmon的confluence接口存在任意命令执行漏洞（CVE-2024-2389）

ProgressFlowmon的confluence接口存在任意命令执行漏洞（CVE-2024-2389）

声明&#xff1a; 本文仅用于技术交流&#xff0c;请勿用于非法用途 由于传播、利用此文所提供的信息而造成的任何直接或者间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c;文章作者不为此承担任何责任。 简介 ProgressFlowmon是一整套用于网络映射、应用程序性能…
阅读更多...
客户端动态降级系统

客户端动态降级系统

本文字数&#xff1a;4576字 预计阅读时间&#xff1a;20分钟 01 背景 无论是iOS还是Android系统的设备&#xff0c;在线上运行时受硬件、网络环境、代码质量等多方面因素影响&#xff0c;可能会导致性能问题&#xff0c;这一类问题有些在开发阶段是发现不了的。如何在线上始终…
阅读更多...
大气的免费wordpress模板

大气的免费wordpress模板

国产的wordpress模板&#xff0c;更适合中国人使用习惯&#xff0c;更符合中国老板的审美的大气wordpress企业官网建站模板。 WordPress模板&#xff0c;也称为主题&#xff0c;是用于定义WordPress网站或博客外观和功能的预设计文件集。这些模板使用HTML、CSS和PHP代码构建&a…
阅读更多...
上传文件到HDFS

上传文件到HDFS

1.创建文件夹 hdfs -dfs -mkdir -p /opt/mydoc 2.查看创建的文件夹 hdfs -dfs -ls /opt 注意改文件夹是创建在hdfs中的&#xff0c;不是本地&#xff0c;查看本地/opt&#xff0c;并没有该文件夹。 3.上传文件 hdfs dfs -put -f file:///usr/local/testspark.txt hdfs://m…
阅读更多...
【深度学习】Vision Transformer

【深度学习】Vision Transformer

一、Vision Transformer Vision Transformer (ViT)将Transformer应用在了CV领域。在学习它之前&#xff0c;需要了解ResNet、LayerNorm、Multi-Head Self-Attention。 ViT的结构图如下&#xff1a; 如图所示&#xff0c;ViT主要包括Embedding、Encoder、Head三大部分。Class …
阅读更多...
Docker in Docker的原理与实战

Docker in Docker的原理与实战

Docker in Docker&#xff08;简称DinD&#xff09;是一种在Docker容器内部运行另一个Docker实例的技术。这种技术允许用户在一个隔离的Docker容器中创建、管理和运行其他Docker容器&#xff0c;从而提供了更灵活和可控的部署选项。以下是DinD的主要特点&#xff1a; 隔离性&am…
阅读更多...
力扣打卡第一天

力扣打卡第一天

101. 对称二叉树 C&#xff1a; class Solution { public:bool isSymmetric(TreeNode* root) {return check(root->left,root->right);}bool check(TreeNode *p,TreeNode *q){ /**定义check方法用来检查两棵树是否是镜像的*/if (!p && !q) return true; /* 如…
阅读更多...
基于SSM的物流快递管理系统（含源码+sql+视频导入教程+文档+PPT）

基于SSM的物流快递管理系统（含源码+sql+视频导入教程+文档+PPT）

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1 、功能描述 基于SSM的物流快递管理系统2拥有三个角色&#xff1a; 管理员&#xff1a;用户管理、管理员管理、新闻公告管理、留言管理、取件预约管理、收件管理、货物分类管理、发件信息管理等 用户…
阅读更多...
如何安全、高速、有效地利用IP代理爬取数据

如何安全、高速、有效地利用IP代理爬取数据

陈老老老板&#x1f9d9;‍♂️ &#x1f46e;‍♂️本文专栏&#xff1a;生活&#xff08;主要讲一下自己生活相关的内容&#xff09;生活就像海洋,只有意志坚强的人,才能到达彼岸。 &#x1f934;本文简述&#xff1a;如何安全、高速、有效地利用IP代理爬取数据 &#x1f473…
阅读更多...
【数据结构-串-数组-广义表】

【数据结构-串-数组-广义表】

目录 1 串-理解1.1 串的抽象定义&#xff1a;-理解1.2 串的存储结构-不断掌握1.2.1 顺序存储结构&#xff1a;1.2.2 链式存储结构&#xff1a; 1.3 串的模式匹配算法&#xff1a;-掌握1.3.1 BF暴力求解算法-代码 -掌握1.3.2 KMP求解算法-代码--掌握 2 数组-不断掌握2.1 顺序存储…
阅读更多...
WWW ‘24 | EarnMore: 如何利用强化学习来处理可定制股票池中的投资组合管理问题

WWW ‘24 | EarnMore: 如何利用强化学习来处理可定制股票池中的投资组合管理问题

WWW 24 | EarnMore: 如何利用强化学习来处理可定制股票池中的投资组合管理问题 原创 QuantML QuantML 2024-04-16 09:04 上海 Content 本文主要探讨了如何利用强化学习&#xff08;Reinforcement Learning, RL&#xff09;来处理可定制股票池&#xff08;Customizable Stock …
阅读更多...
最新文章

Copyright @ 2022~2023