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

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。