鸿蒙开发实战案例：H5页面调用自定义输入法案例思路

原创

小帅聊鸿蒙

发布于 2025-02-20 16:18:35

870

文章被收录于专栏：鸿蒙开发笔记鸿蒙开发笔记

介绍

本示例介绍了@ohos.web.webview组件和Web以及CustomDialog接口实现H5页面调用自定义输入法的功能。该场景多用于浏览器需要使用安全输入法时。

效果图预览

使用说明：

点击密码输入框，弹出自定义键盘。
在自定义键盘上输入内容，能成功映射到h5页面内。

实现步骤

实现H5页面调用自定义输入法，有两个关键点，一是需要将arkTS方法注册到h5页面中；二是要实现弹出键盘的组件。

构建一个 Browser 对象，集成浏览器的方法。创建一个自定义组件 TabletTitle，构成浏览器的工具栏。

// 自定义浏览器对象
export class Browser {
  inputValue: string = "";
  progress: number = 0;
  isRegistered: boolean = false;
  hideProgress: boolean = true;
  tabsController: TabsController = new TabsController();
  webController: WebviewController = new web_webview.WebviewController();
  // 跳转页面
  loadUrl(addr: string | Resource) {
    this.webController.loadUrl(addr);
  }
  // 返回页面
  back(): boolean {
    if (this.webController.accessBackward()) {
      this.webController.backward();
      return true;
    }
    return false;
  }
  // 前进页面
  forward() {
    if (this.webController.accessForward()) {
      this.webController.forward();
    }
  }
  // 刷新页面
  refresh() {
    this.webController.refresh();
  }
}

自定义键盘传入js对象 WebKeyboardObj，构建两个函数：点击登录按钮事件和输入法弹窗弹出事件。其中输入法弹出事件中使用CustomDialog修饰的组件，打开自定义弹窗。

dialogController: CustomDialogController | null = new CustomDialogController({
  builder: CustomKeyboard({
    dialogClose: this.dialogClose,
    items: this.items,
    inputValue: this.inputValue,
    curKeyboardType: this.curKeyboardType,
    onKeyboardEvent: this.onKeyboardEvent,
    closeDialog: this.closeDialog
  }),
  isModal: false,
  alignment: DialogAlignment.Bottom,
  customStyle: true
});
// ...
webKeyboardObj: WebKeyboardObj = {
  // 点击登录按钮事件
  login: () => {
    promptAction.showToast({
      message: $r('app.string.custom_keyboard_to_h5_login_button'),
      duration: 2000
    });
    this.closeDialog();
  },
  // 输入法弹窗弹出事件
  openDialog: (value: string) => {
    this.dialogController?.open();
    this.dialogClose = false;
    if (value?.length) {
      this.inputValue = value;
    }
  }
}

DD一下：`欢迎大家关注公众号<程序猿百晓生>，可以了解到一下知识点。`

1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案） 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

将webKeyboardObj对象通过webController.registerJavaScriptProxy 注册到h5页面中,使页面中可以调用arkTS的方法。

// 注册方法到h5的js中
registerFunc(browser: Browser) {
  if (!browser.isRegistered) {
    browser.webController.registerJavaScriptProxy(this.webKeyboardObj, 'etsObj',
      ['login', 'openDialog'])
    browser.isRegistered = true;
    browser.webController.refresh();
  }
}

构建一个h5页面，在js层中调用注册进入的arkTS方法。

<script>
  function tapInput() {
    document.activeElement.blur();
    let input = document.getElementById("searchCon");
    etsObj.openDialog(input.value); // 打开自定义弹窗
  }
  function setInput(value) {
    let input = document.getElementById("searchCon");
    input.value = value;
  }
  function login() {
    etsObj.login(); // 点击登录按钮
  }
</script>