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

2025-03-10
北京
本文字数：2829 字
阅读完需：约 9 分钟

1、HarmonyOS TextInput 或 TextArea 如何自动获取焦点？

可以使用 focusControl.requestFocus 对需要获取焦点的组件设置焦点，具体可以参考文档：https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-universal-attributes-focus-V5

示例代码如下：

@Entry@Componentstruct 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@Componentstruct 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 })  }}