【每日学点HarmonyOS Next知识】输入框自动获取焦点、JS桥实现方式、Popup设置全屏蒙版、鼠标事件适配、Web跨域

news2025/3/10 7:58:53
1、HarmonyOS TextInput或TextArea如何自动获取焦点?

可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点,具体可以参考文档:
https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-focus-V5
在这里插入图片描述

示例代码如下:

@Entry
@Component
struct TextInputExample {
  controller: TextInputController = new TextInputController()
  @State inputValue: string = ""
  ep: number = 0;
  del:boolean = false;

  // 自定义键盘组件
  @Builder
  CustomKeyboardBuilder() {
    Column() {
      Button('关闭键盘').onClick(() => {
        // 关闭自定义键盘
        this.controller.stopEditing()
      })
      Button('删除字符').onClick(() => {
        this.inputValue = this.inputValue.substring(0, this.ep-1) + this.inputValue.substring(this.ep)
        this.del = true
      })
      Grid() {
        ForEach([1, 2, 3, 4, 5, 6, 7, 8, 9, '*', 0, '#'], (item: number | string) => {
          GridItem() {
            Button(item + "")
              .width(110).onClick(() => {
              this.inputValue = this.inputValue.substring(0, this.ep) + item + this.inputValue.substring(this.ep)
              this.del = false
            })
          }
        })
      }.maxCount(3).columnsGap(10).rowsGap(10).padding(5)
    }.backgroundColor(Color.Gray)
  }

  build() {
    Column() {
      TextInput({ controller: this.controller, text: this.inputValue })
        // 绑定自定义键盘
        .customKeyboard(this.CustomKeyboardBuilder())
        .margin(10)
        .id('input1') //为组件设置id,用于
        .border({ width: 1 })
          //感知光标的变化,然后调整光标位置
        .onChange(() => {
          if(this.del){
            this.controller.caretPosition(--this.ep)
          }else{
            this.controller.caretPosition(++this.ep)
          }

        })
        .onTextSelectionChange((ss) => {
          this.ep = ss;
        })
      Button("触发主动获焦")
        .width(200).height(70).fontColor(Color.White)
        .onClick(() => {
          focusControl.requestFocus('input1') // 使TextInput获焦
        })
    }
  }
}

唤起的输入法键盘类型默认是文本输入textinputtype为0,textinputtype类型可以参考如下:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-inputmethod-V5

2、HarmonyOS JSBridge有哪些实现方式?

应用侧与前端侧交互可以参考下文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkweb-ndk-jsbridge-V5
在这里插入图片描述

在这里插入图片描述

上图展示了具有普遍适用性的小程序的通用架构。在这一架构中,逻辑层依赖于应用程序自带的JavaScript运行时,该运行时在一个已有的C++环境中运行。通过Native接口,逻辑层能够直接在C++环境中与视图层(其中ArkWeb充当渲染器)进行通信,无需回退至ArkTS环境使用ArkTS JSBridge接口。

左图是使用ArkTS JSBridge接口构建小程序的方案,如红框所示,应用需要先调用到ArkTS环境,再调用到C++环境。右图是使用Native JSBridge接口构建小程序的方案,不需要ArkTS环境和C++环境的切换,执行效率更高。

在这里插入图片描述

Native JSBridge方案可以解决ArkTS环境的冗余切换,同时允许回调在非UI线程上运行,避免造成UI阻塞。

3、HarmonyOS 怎么给bindPopup设置全屏的蒙版?

怎么给bindPopup设置全屏的蒙版

参考如下demo:

@Entry
@Component
struct PopupExample {
  @State handlePopup: boolean = false
  @State customPopup: boolean = false
  // popup构造器定义弹框内容
  @Builder popupBuilder() {
    Row({ space: 2 }) {
      Image($r("app.media.startIcon")).width(24).height(24).margin({ left: -5 })
      Text('Custom Popup').fontSize(10)
    }.width(100).height(50).padding(5)
  }

  build() {
    Flex({ direction: FlexDirection.Column }) {
      // PopupOptions 类型设置弹框内容
      Button('PopupOptions')
        .onClick(() => {
          this.handlePopup = !this.handlePopup
        })
        .bindPopup(this.handlePopup, {
          builder: this.popupBuilder,
          placement: Placement.Top,
          mask: {color: Color.Gray},
          popupColor: Color.Yellow,
          enableArrow: true,
          message: 'This is a popup with PopupOptions',
          placementOnTop: true,
          showInSubWindow:false,
          primaryButton: {
            value: 'confirm',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('confirm Button click')
            }
          },
          // 第二个按钮
          secondaryButton: {
            value: 'cancel',
            action: () => {
              this.handlePopup = !this.handlePopup
              console.info('cancel Button click')
            }
          },
          onStateChange: (e) => {
            console.info(JSON.stringify(e.isVisible))
            if (!e.isVisible) {
              this.handlePopup = false
            }
          }
        })
        .position({ x: 100, y: 150 })

    }.width('100%').padding({ top: 5 })
  }
}
4、HarmonyOS web组件中的鼠标右键单机事件在2in1设备正常使用,在tablet中失效,应该如何兼容?

可以参考交互事件归一接口,使得不同交互设备上的交互体验一致,尽量减少不同输入设备适配工作;

交互事件参考链接如下:https://developer.huawei.com/consumer/cn/doc/design-guides/hmi-interaction-events-0000001795531217#section485844185018
在这里插入图片描述

交互事件归一开发文档参考链接如下:https://gitee.com/openharmony/docs/blob/master/zh-cn/application-dev/key-features/multi-device-app-dev/interaction-event-normalization.md

5、HarmonyOS web组件通过file://协议加载本地文件,本地文件JS中发起http请求报错,提示跨域了,这种如何解决?

可以设置customizeSchemes,参考文档:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/js-apis-webview-V5#ZH-CN_TOPIC_0000001920279886__customizeschemes
https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-cross-origin-V5#ZH-CN_TOPIC_0000001884916574__%E6%8B%A6%E6%88%AA%E6%9C%AC%E5%9C%B0%E8%B5%84%E6%BA%90%E8%B7%A8%E5%9F%9F

需自行配置schemeMap 和mimeTypeMap。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

网络空间安全(19)CSRF攻防

一、简介 跨站请求伪造(Cross-Site Request Forgery,简称CSRF)是一种网络攻击方式。攻击者通过诱导受害者访问恶意页面,利用受害者在被攻击网站已经获取的注册凭证(如Cookie),绕过后台的用户验证…

DEV C++安装

点击----我接受 点击--下一步 选择安装路径: D盘安装选择路径: 点击----安装等待安装完成点击---完成即可 一路下一步即可

ESP32驱动OV3660摄像头实现物体轮廓识别(摄像头支持红外夜视、边缘AI计算)

目录 1、传感器特性 2、硬件原理图 3、驱动程序 ESP32-S3 AI智能摄像头模块是一款专为智能家居和物联网应用打造的高性能边缘AI开发模组。它集成了摄像头、麦克风、音频功放、环境光传感器和夜视补光灯,无需依赖云端即可实现本地化AI推理。 凭借TensorFlow Lite、YOLO和O…

深入探讨 Docker 层次结构及其备份策略20250309

深入探讨 Docker 层次结构及其备份策略 本文将深入探讨 Docker 层次结构 以及在 不同场景下应选择哪种备份方式。通过本文的介绍,您将对如何高效地管理和迁移 Docker 容器有更深的理解。 📌 什么是 Docker 层次结构? Docker 镜像采用了 分…

游戏引擎学习第145天

仓库:https://gitee.com/mrxiao_com/2d_game_3 今天的计划 目前,我们正在完成遗留的工作。当时我们已经将声音混合器(sound mixer)集成到了 SIMD 中,但由于一个小插曲,没有及时完成循环内部的部分。这个小插曲主要是…

如何在el-input搜索框组件的最后面,添加图标按钮?

1、问题描述 2、解决步骤 在el-input组件标签内,添加一个element-plus的自定义插槽, 在插槽里放一个图标按钮即可。 3、效果展示 结语 以上就是在搜索框组件的末尾添加搜索按钮的过程。 喜欢本篇文章的话,请关注本博主~~

NoteGen是一款开源跨平台的 AI 笔记应用,专注于 recording 和 writing ,基于 Tauri 开发

一、软件介绍 文末提供程序和源码下载 NoteGen 是一款专注于记录和写作的跨平台 AI 笔记应用,基于 Tauri 开发。NoteGen 的核心理念是将记录、写作和 AI 结合使用,三者相辅相成。记录功能可以帮助用户快速捕捉和整理碎片化知识。整理功能是连接记录和写…

第五次CCF-CSP认证(含C++源码)

第五次CCF-CSP认证 第一道(easy)思路及AC代码 第二道(easy)思路及AC代码solution 1solution 2 第三道(mid)思路及AC代码(mid) 第一道(easy) 题目链接 思路及…

个人学习编程(3-06) 搜索

树的高度&#xff1a; 题目&#xff1a; PS G:\vscodetest> .\ab.exe 5 5 1 2 1 4 1 5 2 3 3 #include <stdio.h> #include <vector> #include <queue> using namespace std; int main() {int n,m;scanf("%d %d",&n,&m);vector<vec…

springcloud sentinel教程

‌QPS&#xff08;Queries Per Second&#xff09;即每秒查询率 TPS&#xff0c;每秒处理的事务数目 PV&#xff08;page view&#xff09;即页面浏览量 UV 访问数&#xff08;Unique Visitor&#xff09;指独立访客访问数 一、初识Sentinel 什么是雪崩问题? 微服务之间相…

从零开始用react + tailwindcss + express + mongodb实现一个聊天程序(十一) 实现服务端和客户端socketio 连接

1.后端部分 socketIO文档参考Socket.IO 首先在lib下新建socket.js文件 参考服务器API | Socket.IO import {Server} from socket.io; import http from http import express from "express"const app express() const server http.createServer(app) const io …

【GoTeams】-3:构建api、重构错误码

本文目录 1. 构建api梳理调用关系api包的作用路由梳理注册Register代码语法 2. 重构错误码 1. 构建api 首先复制project-user&#xff0c;改名为project-api&#xff0c;放在总的路径下&#xff0c;然后在工作区中进行导入。 运行命令go work use .\project-api\新建工作区之…

《苍穹外卖》SpringBoot后端开发项目重点知识整理(DAY1 to DAY3)

目录 一、在本地部署并启动Nginx服务1. 解压Nginx压缩包2. 启动Nginx服务3. 验证Nginx是否启动成功&#xff1a; 二、导入接口文档1. 黑马程序员提供的YApi平台2. YApi Pro平台3. 推荐工具&#xff1a;Apifox 三、Swagger1. 常用注解1.1 Api与ApiModel1.2 ApiModelProperty与Ap…

BLUEM2引擎源码2025最新版

BLUE 引擎解析&#xff1a;传奇私服圈中的热门引擎 一、BLUE 引擎简介 BLUE 引擎是传奇私服圈子中较为知名的一款游戏引擎&#xff0c;它在传统的传奇引擎基础上进行了优化和扩展&#xff0c;使得私服开发者可以更加方便地搭建和管理服务器。相比于早期的 GEE、LEG、Hero 等引…

【RAG】检索后排序 提高回答精度

问题: RAG中&#xff0c;有时&#xff0c;最合适的答案不一定排在检索的最前面 user_query "how safe is llama 2" search_results vector_db.search(user_query, 5)for doc in search_results[documents][0]:print(doc"\n")response bot.chat(user_qu…

采用内存局部性分配有什么好处?

内存分配时的局部性分配&#xff08;Locality of Allocation&#xff09;是指将相关的内存对象分配在相邻或相近的内存区域中。这种分配策略在现代计算机系统中具有显著的好处&#xff0c;主要体现在以下几个方面&#xff1a; 1. 提高缓存命中率 现代计算机系统依赖于多级缓存…

【Dubbo+Zookeeper】——SpringBoot+Dubbo+Zookeeper知识整合

&#x1f3bc;个人主页&#xff1a;【Y小夜】 &#x1f60e;作者简介&#xff1a;一位双非学校的大二学生&#xff0c;编程爱好者&#xff0c; 专注于基础和实战分享&#xff0c;欢迎私信咨询&#xff01; &#x1f386;入门专栏&#xff1a;&#x1f387;【MySQL&#xff0…

使用阿里云操作系统控制台排查内存溢出

引言 操作系统控制台是阿里云最新推出的一款智能运维工具&#xff0c;专为提升运维效率、优化服务器管理而设计。它集成了多种运维管理功能&#xff0c;包括操作系统助手、插件管理器以及其他实用工具&#xff0c;为用户提供一站式的运维解决方案。无论是个人开发者还是企业运…

3.3.2 Proteus第一个仿真图

文章目录 文章介绍0 效果图1 新建“点灯”项目2 添加元器件3 元器件布局接线4 补充 文章介绍 本文介绍&#xff1a;使用Proteus仿真软件画第一个仿真图 0 效果图 1 新建“点灯”项目 修改项目名称和路径&#xff0c;之后一直点“下一步”直到完成 2 添加元器件 点击元…

深入了解Linux —— 调试程序

前言 我们已经学习了linux下许多的工具&#xff0c;vim、gcc、make/makefile等&#xff1b; 已经能够在linux写代码&#xff0c;并且进行编译运行&#xff0c;让程序在linux下跑起来。 但是&#xff0c;如果我们在写代码的时候遇见了错误&#xff1b;但是我们并不知道错误在哪&…