【鸿蒙实战开发】基于webview拉起自定义键盘

最新推荐文章于 2024-11-28 21:01:53 发布

「已注销」

最新推荐文章于 2024-11-28 21:01:53 发布

阅读量1k

点赞数 7

CC 4.0 BY-SA版权

分类专栏： HarmonyOS 鸿蒙开发移动开发文章标签： harmonyos 计算机外设组件化开发 tcp/ip 网络组件化自定义控件

本文链接：https://blog.youkuaiyun.com/HarmonyOSMN/article/details/140358109

场景描述

在特殊的H5场景下需要应用拉起自定义键盘进行输入。

场景一：使用jsBridge拉起自定义弹窗写自定义键盘，再通过jsBridge传参实现输入。

场景二：使用web的同层渲染将原生textInput组件渲染到页面上。

方案描述

通过注册一个js代理对象被web的registerJavaScriptProxy方法调用拉起CustomDialog，在CustomDialog上放置一个customkeyboard

场景一：通过jsBridge拉起自定义弹窗，在自定义弹窗上放置自定义键盘，例如需要输入密码时的安全键盘。

效果图

方案

通过注册一个js代理对象被web的registJavaScriptProxy方法调用拉起CustomDialog，在CustomDialog上放置一个自定义键盘组件，通过在H5上input标签的readonly属性和注册的js方法changeNumbers实现在原生端输入数字传到H5上，他们之间通过@Link装饰器绑定的变量进行传值，所以点击删除输入的内容也是可以在H5上实现的。

核心代码

通过javaScriptProxy方法拉起自定义弹窗，在H5上的input标签绑定一个onclick事件，当点击输入框后会调用从原生注册过来的js代理方法openWindow。

    <input type="text" name="number_info" readonly onclick="openWindow()" value="" style="width: 500px;height: 100px;font-size:50px;border:1px solid # f00;">

    <script>

    function openWindow() {

    let value = document.getElementsByName("number_info")[0].value;

    window.myJsb.openDialog(value)

    }

    </script>

当H5上openWindow方法被调用后会通过jsBridge调用以下两个js代理方法打开自定义弹窗。

    jsbObject: JsbObject = {

    openDialog: (value: string) => {

    this.showDialog(this, value);

    }

    }

    showDialog(context: object, value: string) {

    // 把自定义弹窗调出来

    this.currentData = value;

    this.dialogController.open()

    }

    Web({ src: "resource://rawfile/web_test.html", controller: this.webviewController })

    .javaScriptAccess(true)

    .javaScriptProxy({

    name: "myJsb",

    object: this.jsbObject,

    methodList: ["openDialog"],

    controller: this.webviewController

    })

将自定义键盘放置在自定义弹窗上。

    @CustomDialog

    struct CustomDialogExample {

    @Link currentData: string

    dialogControllerTwo: CustomDialogController | null = new CustomDialogController({

    builder: CustomDialogExample({ currentData: $currentData }),

    alignment: DialogAlignment.Bottom,

    offset: { dx: 0, dy: -25 }

    })

    controller?: CustomDialogController

    build() {

    Column() {

    Button('x').onClick(() => {

    // 关闭自定义键盘

    if (this.controller != undefined) {

    this.cont