当前位置：首页 > news >正文

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

news 来源：原创 2025/8/23 19:08:50

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;// 自定义键盘组件@BuilderCustomKeyboardBuilder() {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.handlePopupconsole.info('confirm Button click')}},// 第二个按钮secondaryButton: {value: 'cancel',action: () => {this.handlePopup = !this.handlePopupconsole.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。

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

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

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

4、HarmonyOS web组件中的鼠标右键单机事件在2in1设备正常使用，在tablet中失效，应该如何兼容？

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

相关文章：